diff --git a/src/addon/erp/erp.zip b/src/addon/erp/erp.zip
new file mode 100644
index 0000000..335ee7c
Binary files /dev/null and b/src/addon/erp/erp.zip differ
diff --git a/src/addon/shop/api/cart.ts b/src/addon/shop/api/cart.ts
new file mode 100644
index 0000000..fb53811
--- /dev/null
+++ b/src/addon/shop/api/cart.ts
@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+/**
+ * 添加购物车
+ */
+export function addCart(data : AnyObject) {
+	return request.post(`shop/cart`, data)
+}
+
+/**
+ * 编辑购物车数量
+ */
+export function editCart(data : AnyObject) {
+	return request.put(`shop/cart`, data)
+}
+
+/**
+ * 删除购物车
+ */
+export function deleteCart(data : AnyObject) {
+	return request.put(`shop/cart/delete`, data)
+}
+
+/**
+ * 清空购物车
+ */
+export function clearCart() {
+	return request.delete(`shop/cart/clear`)
+}
+
+/**
+ * 获取购物车列表
+ */
+export function getCartList(params : Record<string, any>) {
+	return request.get(`shop/cart`, params)
+}
+
+/**
+ * 获取购物车商品列表
+ */
+export function getCartGoodsList(params : Record<string, any>) {
+	return request.get(`shop/cart/goods`, params)
+}
+
+/**
+ * 获取购物车数量
+ */
+export function getCartSum(params : Record<string, any>) {
+	return request.get(`shop/cart/sum`, params)
+}
+
+
+/**
+ * 购物车计算
+ */
+export function getCartCalculate(params : Record<string, any>) {
+	return request.get(`shop/cart/calculate`, params)
+	
+}
\ No newline at end of file
diff --git a/src/addon/shop/api/config.ts b/src/addon/shop/api/config.ts
new file mode 100644
index 0000000..abd5d8c
--- /dev/null
+++ b/src/addon/shop/api/config.ts
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+/**
+ * 获取发票配置
+ */
+export function getInvoiceConfig() {
+	return request.get(`shop/config/invoice`)
+}
\ No newline at end of file
diff --git a/src/addon/shop/api/coupon.ts b/src/addon/shop/api/coupon.ts
new file mode 100644
index 0000000..1d6a9e3
--- /dev/null
+++ b/src/addon/shop/api/coupon.ts
@@ -0,0 +1,63 @@
+import request from '@/utils/request'
+
+/**
+ * 优惠券列表
+ */
+export function getShopCouponList(params: Record<string, any>) {
+    return request.get(`shop/coupon`, params)
+}
+
+/**
+ * 优惠券详情
+ */
+export function getShopCouponInfo(id: number) {
+    return request.get(`shop/coupon/${ id }`)
+}
+
+/**
+ * 优惠券二维码
+ */
+export function getShopCouponQrocde(id: number) {
+    return request.get(`shop/coupon/qrcode/${ id }`)
+}
+
+/**
+ * 领取优惠券
+ */
+export function getCoupon(params: Record<string, any>) {
+    return request.post(`shop/coupon`, params, { showSuccessMessage: true })
+}
+
+/**
+ * 获取我的优惠券
+ */
+export function getMyCouponList(params: Record<string, any>) {
+    return request.get(`shop/member/coupon`, params)
+}
+
+/**
+ * 获取优惠券列表供组件调用
+ */
+export function getShopCouponComponents(params: Record<string, any>) {
+    return request.get(`shop/coupon/components`, params)
+}
+
+/**
+ * 获取我的优惠券数量
+ * status 1：待使用，2：已使用，3：已过期，4：已失效
+ */
+export function getMyCouponCount(params: Record<string, any>) {
+    return request.get(`shop/member/coupon/count`, params)
+}
+/**
+ * 获取我的优惠券类型
+ */
+export function getMyCouponType() {
+    return request.get(`shop/coupon_type`)
+}
+/**
+ * 获取我的优惠数量
+ */
+export function getMyCouponStatusCount() {
+    return request.get(`shop/member/coupon/status_count`)
+}
\ No newline at end of file
diff --git a/src/addon/shop/api/discount.ts b/src/addon/shop/api/discount.ts
new file mode 100644
index 0000000..db42d55
--- /dev/null
+++ b/src/addon/shop/api/discount.ts
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+/**
+ * 获取限时折扣轮播
+ * @returns
+ */
+export function getActiveDiscountConfig() {
+    return request.get(`shop/discount/config`);
+}
+
+/**
+ * 获取限时折扣列表
+ * @returns
+ */
+export function getActiveDiscountList(params: Record<string, any>) {
+    return request.get(`shop/discount`, params)
+}
+
+/**
+ * 获取限时折扣商品列表
+ * @returns
+ */
+export function getActiveDiscountGoodsList(params: Record<string, any>) {
+    return request.get(`shop/discount/goods`, params)
+}
\ No newline at end of file
diff --git a/src/addon/shop/api/evaluate.ts b/src/addon/shop/api/evaluate.ts
new file mode 100644
index 0000000..b2bba7d
--- /dev/null
+++ b/src/addon/shop/api/evaluate.ts
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+/**
+ * 获取商品评价
+ */
+export function getEvaluateList(params: Record<string, any>) {
+    return request.get(`shop/goods/evaluate`,params)
+}
+/**
+ * 获取评价详情
+ */
+export function getEvaluateInfo(id:any) {
+    return request.get(`shop/goods/evaluate/${id}`)
+}
+/**
+ * 提交评论
+ */
+export function setOrderEvaluate(params: Record<string, any>) {
+    return request.post('shop/goods/evaluate', params, {showSuccessMessage: true})
+}
+/**
+ * 获取订单评价
+ */
+export function getOrderEvaluate(id: any) {
+    return request.get(`shop/order/evaluate/${id}`)
+}
diff --git a/src/addon/shop/api/goods.ts b/src/addon/shop/api/goods.ts
new file mode 100644
index 0000000..cd6b172
--- /dev/null
+++ b/src/addon/shop/api/goods.ts
@@ -0,0 +1,106 @@
+import request from '@/utils/request'
+
+/**
+ * 获取商品分类模板配置
+ */
+export function getGoodsCategoryConfig() {
+    return request.get(`shop/goods/category/config`)
+}
+
+/**
+ * 获取商品分类树结构
+ */
+export function getGoodsCategoryTree() {
+    return request.get(`shop/goods/category/tree`)
+}
+
+/**
+ * 获取商品分类列表
+ */
+export function getGoodsCategoryList(params: Record<string, any>) {
+    return request.get(`shop/goods/category/list`, params)
+}
+
+/**
+ * 获取商品列表
+ */
+export function getGoodsPages(params: Record<string, any>) {
+    return request.get(`shop/goods/pages`, params)
+}
+
+/**
+ * 获取商品详情
+ */
+export function getGoodsDetail(params: Record<string, any>) {
+    return request.get(`shop/goods/detail`, params)
+}
+
+/**
+ * 获取商品规格
+ */
+export function getGoodsSku(sku_id: any) {
+    return request.get(`shop/goods/sku/${ sku_id }`)
+}
+
+/**
+ * 收藏列表
+ */
+export function getCollectList(params: Record<string, any>) {
+    return request.get(`shop/goods/collect`, params)
+}
+
+/**
+ * 取消收藏
+ */
+export function cancelCollect(params: Record<string, any>) {
+    return request.put(`shop/goods/collect`, params, { showSuccessMessage: true })
+}
+
+/**
+ *  收藏
+ */
+export function collect(goods_id: any) {
+    return request.post(`shop/goods/collect/${ goods_id }`)
+}
+
+
+/**
+ * 获取评价
+ */
+export function getEvaluateList(goods_id: any) {
+    return request.get(`shop/goods/evaluate/list`, { goods_id })
+}
+
+/**
+ * 获取商品列表供组件调用
+ */
+export function getGoodsComponents(params: Record<string, any>) {
+    return request.get(`shop/goods/components`, params)
+}
+
+/**
+ * 获取商品满减信息
+ */
+export function getManjian(params: Record<string, any>) {
+    return request.get(`shop/manjian/info`, params)
+}
+
+/**
+ *  商品足迹添加
+ */
+export function browse(params: Record<string, any>) {
+    return request.post(`shop/goods/browse`, params, { showSuccessMessage: false })
+}
+/**
+ *  商品足迹列表
+ */
+export function getBrowse(params: Record<string, any>) {
+    return request.get(`shop/goods/browse`, params)
+}
+
+/**
+ * 商品足迹删除
+ */
+export function delBrowse(params: Record<string, any>) {
+    return request.delete(`shop/goods/browse`, params)
+}
\ No newline at end of file
diff --git a/src/addon/shop/api/newcomer.ts b/src/addon/shop/api/newcomer.ts
new file mode 100644
index 0000000..b413b26
--- /dev/null
+++ b/src/addon/shop/api/newcomer.ts
@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+// 分享专区列表
+export function getNewcomerGoodsList(params: Record<string, any>) {
+    return request.get(`shop/newcomer/goods`, params)
+}
+
+export function getNewcomersConfig() {
+    return request.get(`shop/newcomer/config`)
+}
+
+// 首页新人专享列表
+export function getNewcomersComponentsList(params: Record<string, any>) {
+    return request.get(`shop/newcomer/goods/components`, params)
+}
+
diff --git a/src/addon/shop/api/order.ts b/src/addon/shop/api/order.ts
new file mode 100644
index 0000000..c0267e9
--- /dev/null
+++ b/src/addon/shop/api/order.ts
@@ -0,0 +1,86 @@
+import request from '@/utils/request'
+
+/***************************************************** 订单列表 ****************************************************/
+/**
+ * 获取订单设置
+ */
+export function getShopOrderConfig() {
+    return request.get(`shop/order/config`)
+}
+
+/**
+ * 获取订单状态列表
+ */
+export function getShopOrderStatus() {
+    return request.get(`shop/order/status`)
+}
+
+/**
+ * 获取订单列表
+ */
+export function getShopOrder(params: Record<string, any>) {
+    return request.get(`shop/order`, params)
+}
+
+/**
+ * 获取订单角标数据
+ */
+export function getShopOrderNum() {
+    return request.get(`shop/order/num`)
+}
+
+/**
+ * 获取订单详情
+ */
+export function getShopOrderDetail(order_id: any) {
+    return request.get(`shop/order/${order_id}`)
+}
+
+/**
+ * 关闭订单
+ */
+export function orderClose(order_id: number) {
+    return request.put(`shop/order/close/${order_id}`)
+}
+
+/**
+ * 订单完成
+ */
+export function orderFinish(order_id: number) {
+    return request.put(`shop/order/finish/${order_id}`)
+}
+
+/**
+ * 订单创建计算
+ */
+export function orderCreateCalculate(params: Record<string, any>) {
+    return request.get('shop/order_create/calculate', params)
+}
+
+/**
+ * 订单创建
+ */
+export function orderCreate(params: Record<string, any>) {
+    return request.post('shop/order_create/create', params)
+}
+
+/**
+ * 查询订单可用优惠券
+ */
+export function orderCoupon(params: Record<string, any>) {
+    return request.get('shop/order_create/coupon', params)
+}
+
+/**
+ * 查询自提点
+ */
+export function getStoreList(params: Record<string, any>) {
+    return request.get('shop/order_create/store', params)
+}
+
+/**
+ * 查询物流信息
+ */
+export function getMaterialflowList(params: Record<string, any>) {
+    return request.get('shop/order/logistics', params)
+}
\ No newline at end of file
diff --git a/src/addon/shop/api/point.ts b/src/addon/shop/api/point.ts
new file mode 100644
index 0000000..7bc23cc
--- /dev/null
+++ b/src/addon/shop/api/point.ts
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+/**
+ * 获取个人积分信息
+ * @returns
+ */
+export function getExchangePoint() {
+    return request.get(`shop/exchange/point`);
+}
+
+/**
+ * 获取积分商城推荐列表
+ * @returns
+ */
+export function getExchangeComponentsList(params : Record<string, any>) {
+	return request.get(`shop/exchange/components`, params)
+}
+/**
+ * 获取积分商城列表
+ * @returns
+ */
+export function getExchangeGoodsList(params : Record<string, any>) {
+	return request.get(`shop/exchange`, params)
+}
+/**
+ * 获取积分商品详情
+ */
+export function getExchangeGoodsDetail(id: any) {
+    return request.get(`shop/exchange/goods/${id}`)
+}
+
+/**
+ * 订单创建计算
+ */
+export function orderCreateCalculate(params: Record<string, any>) {
+    return request.get('shop/exchange_order/calculate', params)
+}
+
+/**
+ * 订单创建
+ */
+export function orderCreate(params: Record<string, any>) {
+    return request.post('shop/exchange_order/create', params)
+}
+
diff --git a/src/addon/shop/api/rank.ts b/src/addon/shop/api/rank.ts
new file mode 100644
index 0000000..2799524
--- /dev/null
+++ b/src/addon/shop/api/rank.ts
@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+// 榜单分类列表
+export function getRankList() {
+    return request.get(`shop/rank`)
+}
+
+// 榜单商品列表
+export function getRankGoodsList(params: Record<string, any>) {
+    return request.get(`shop/rank/goods`, params)
+}
+
+// 获取排行榜配置
+export function getRankConfig() {
+    return request.get(`shop/rank/getRankConfig`)
+}
+
+// 榜单组件商品列表
+export function getRankComponentsGoodsList(params: Record<string, any>) {
+    return request.get(`shop/rank/components`, params)
+}
+
+
+
+
+ 
+
+
+
diff --git a/src/addon/shop/api/refund.ts b/src/addon/shop/api/refund.ts
new file mode 100644
index 0000000..a76f567
--- /dev/null
+++ b/src/addon/shop/api/refund.ts
@@ -0,0 +1,71 @@
+import request from '@/utils/request'
+
+/**
+ * 申请退款
+ */
+export function applyRefund(params: Record<string, any>) {
+	return request.post(`shop/refund/apply`, params, { showSuccessMessage: true })
+}
+
+/**
+ * 修改退款申请
+ */
+export function editRefund(params: Record<string, any>) {
+	return request.put(`shop/refund/${params.order_refund_no}`, params, { showSuccessMessage: true })
+}
+
+/**
+ * 申请退款退货
+ */
+export function refundDelivery(params: Record<string, any>) {
+	return request.post(`shop/refund/delivery/${params.order_refund_no}`, params, { showSuccessMessage: true })
+}
+
+/**
+ * 修改退款申请
+ */
+export function editRefundDelivery(params: Record<string, any>) {
+	return request.put(`shop/refund/delivery/${params.order_refund_no}`, params, { showSuccessMessage: true })
+}
+
+/**
+ * 获取退款原因
+ */
+export function getRefundReason() {
+    return request.get('shop/refund/reason')
+}
+
+/**
+ * 获取退款列表
+ */
+export function getRefundList() {
+    return request.get('shop/order/refund')
+}
+
+/**
+ * 获取退款详情
+ */
+export function getRefundDetail(orderRefundNo: string) {
+    return request.get(`shop/order/refund/${orderRefundNo}`)
+}
+
+/**
+ * 获取退款金额
+ */
+export function getRefundMoney(params: Record<string, any>) {
+    return request.get(`shop/refund/refund_data`,params)
+}
+
+/**
+ * 编辑退款金额
+ */
+export function getRefundMoneyAgain(params: Record<string, any>) {
+    return request.get(`shop/refund/refund_data_by_no`,params)
+}
+
+/**
+ * 取消维权
+ */
+export function closeRefund(orderRefundNo: string) {
+    return request.put(`shop/refund/close/${orderRefundNo}`,{}, { showSuccessMessage: true })
+}
diff --git a/src/addon/shop/api/shop.ts b/src/addon/shop/api/shop.ts
new file mode 100644
index 0000000..eb0ac14
--- /dev/null
+++ b/src/addon/shop/api/shop.ts
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+/**
+ * 获取评论设置
+ */
+export function getEvaluateConfig() {
+    return request.get(`shop/goods/evaluate/config`)
+}
\ No newline at end of file
diff --git a/src/addon/shop/components/diy/goods-coupon/index.vue b/src/addon/shop/components/diy/goods-coupon/index.vue
new file mode 100644
index 0000000..74a51e7
--- /dev/null
+++ b/src/addon/shop/components/diy/goods-coupon/index.vue
@@ -0,0 +1,389 @@
+<template>
+	<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config" v-if="couponList && Object.keys(couponList).length > 0">
+		<view :style="warpCss" class="overflow-hidden">
+
+			<view v-if="diyComponent.style == 'style-1'" class="coupon-wrap style-1 relative">
+				<scroll-view scroll-x="true" class="coupon-list" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style1_bg2.png') + ')','background-size':'100%','background-repeat':'no-repeat'}">
+					<view class="coupon-class">
+						<block v-if="couponList.length > 1">
+							<view v-for="(item,index) in couponList" :key="index" class="rounded-[16rpx] box-border pt-[14rpx] inline-flex flex-col items-center relative w-[150rpx] h-[130rpx]" :class="{'mr-[20rpx]': index != couponList.length-1}" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/coupon_item_bg.png') + ')','background-size':'100%','background-repeat':'no-repeat'}" @click="couponItemLink(item)">
+								<view class="truncate w-full flex items-baseline justify-center price-font text-[var(--price-text-color)]">
+									<text class="text-[26rpx] font-500">￥</text>
+									<text class="text-[36rpx] truncate font-500">{{ parseFloat(item.price) }}</text>
+								</view>
+								<view class="text-[#303133] text-[20rpx] mt-[12rpx]">{{ item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
+								<view class="mt-[auto] rounded-b-[12rpx] text-[#f2333c] text-[20rpx] w-[100%] h-[36rpx] flex items-center justify-center bg-[#fff5f2]">{{item.type_name}}</view>
+							</view>
+						</block>
+						<block v-else>
+							<view v-for="(item,index) in couponList" :key="index" class="rounded-[16rpx] box-border pt-[14rpx] pl-[44rpx] pr-[44rpx] inline-flex items-center justify-between relative w-[100%] h-[130rpx]" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style1_bg4.png') + ')','background-size':'100%','background-repeat':'no-repeat'}"  @click="couponItemLink(item)">
+								<view class="flex price-font text-[var(--price-text-color)] items-baseline">
+									<text class="text-[36rpx] mt-[16rpx] mr-[4rpx]">￥</text>
+									<text class="text-[85rpx] font-500 max-w-[170rpx] truncate">{{parseFloat(item.price)}}</text>
+								</view>
+								<view class="border-0 border-dashed border-r-[2rpx] border-[#FF323C] absolute left-[40%] top-[46rpx] bottom-0 w-[2rpx]"></view>
+								<view class="w-[270rpx]">
+									<view class="flex items-center mt-[auto]">
+										<text class="rounded-[4rpx] bg-[#fff3f0] text-[#f2333c] border-[2rpx] border-solid border-[#f2333c] text-[22rpx] px-[6rpx] pb-[4rpx] pt-[6rpx] flex items-center justify-center whitespace-nowrap">{{item.type_name}}</text>
+										<text class="ml-[4rpx] text-[#f2333c] max-w-[184rpx] truncate">{{item.title}}</text>
+									</view>
+									<view class="text-[#f2333c] text-[30rpx] font-500 mt-[10rpx] w-[270rpx] truncate">{{item.min_condition_money == '0.00' ? '无门槛' : ('消费满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
+								</view>
+							</view>
+						</block>
+					</view>
+				</scroll-view>
+				<view class="w-[100%] h-[130rpx] pt-[24rpx] px-[26rpx] box-border flex items-center justify-between absolute left-0 right-0 bottom-0" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style1_bg.png') + ')','background-size':'100% 130rpx','background-repeat':'no-repeat'}">
+					<view class="flex flex-col">
+						<text class="text-[30rpx] text-[#fff] font-400">{{ diyComponent.couponTitle }}</text>
+						<text class="text-[20rpx] text-[rgba(255,255,255,.8)] mt-[10rpx]">{{ diyComponent.couponSubTitle }}</text>
+					</view>
+					<text v-if="diyComponent.btnText" @click="toLink('/addon/shop/pages/coupon/list')" class="bg-[#fff] flex items-center justify-center text-[#FF4142] text-[22rpx] min-w-[100rpx] px-[24rpx] box-border h-[50rpx] coupon-buy-btn">{{diyComponent.btnText}}</text>
+				</view>
+			</view>
+
+			<view v-else-if="diyComponent.style == 'style-2'" class="coupon-wrap style-2 relative">
+				<scroll-view scroll-x="true" class="coupon-list">
+					<view v-for="(item,index) in couponList" :key="index" class="box-border pt-[14rpx] inline-flex flex-col items-center relative w-[140rpx] h-[130rpx] rounded-[10rpx]" :class="{'mr-[20rpx]': index != couponList.length-1, 'mr-[290rpx]': index == couponList.length-1}" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/coupon_item_bg.png') + ')','background-size':'100%','background-repeat':'no-repeat'}" @click="couponItemLink(item)">
+						<view class="flex items-baseline justify-center w-full truncate price-font text-[var(--price-text-color)]">
+							<text class="text-[24rpx]">￥</text>
+							<text class="text-[38rpx] font-bold truncate">{{parseFloat(item.price)}}</text>
+						</view>
+						<view class="text-[#303133] text-[20rpx] truncate max-w-[120rpx] mt-[12rpx]">{{item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
+						<view class="mt-[auto] rounded-b-[12rpx] text-[#f2333c] text-[20rpx] w-[100%] h-[36rpx] flex items-center justify-center bg-[#fff5f2]">{{item.type_name}}</view>
+					</view>
+				</scroll-view>
+				<view class="w-[290rpx] h-[170rpx] py-[20rpx] pl-[30rpx] box-border flex flex-col items-center justify-between absolute right-0 bottom-0" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style2_bg.png') + ')','background-size':'290rpx 170rpx','background-repeat':'no-repeat'}">
+					<text class="text-[30rpx] text-[#fff] font-500">{{ diyComponent.couponTitle }}</text>
+					<text class="text-[20rpx] text-[rgba(255,255,255,.8)] mt-[14rpx]">{{ diyComponent.couponSubTitle }}</text>
+					<text v-if="diyComponent.btnText" @click="toLink('/addon/shop/pages/coupon/list')" class="bg-[#fff] text-[#FF4142] text-[22rpx] min-w-[100rpx] px-[24rpx] box-border h-[50rpx] leading-[50rpx] text-center coupon-buy-btn mt-auto">{{diyComponent.btnText}}</text>
+				</view>
+			</view>
+			
+			<view v-else-if="diyComponent.style == 'style-3'" class="coupon-wrap style-3 relative" :style="{'background-image':'url(' + img('addon/shop/diy/goods_coupon/style3_bg.jpg') + ')','background-size':'100% 204rpx','background-repeat':'no-repeat'}">
+				<view class="desc flex flex-col">
+					<text class="text-[30rpx] text-[#fff] font-500">{{ diyComponent.couponTitle }}</text>
+					<text class="text-[22rpx] text-[rgba(255,255,255,.8)] mt-[10rpx]">{{ diyComponent.couponSubTitle }}</text>
+					<text v-if="diyComponent.btnText" @click="toLink('/addon/shop/pages/coupon/list')" class="bg-[#fff] text-[#FF4142] text-[24rpx] w-[140rpx] box-border h-[50rpx] leading-[50rpx] text-center coupon-buy-btn mt-auto">{{diyComponent.btnText}}</text>
+				</view>
+				<scroll-view scroll-x="true" class="coupon-list" v-if="couponList.length > 1">
+					<view v-for="(item,index) in couponList" :key="index" class="bg-[#fff] box-border p-[8rpx] pb-[12rpx] inline-flex flex-col items-center relative rounded-[20rpx] ml-[12rpx]" @click="couponItemLink(item)">
+						<view class="coupon-item-content">
+							<view class="text-[20rpx] text-[#fff]">{{item.type_name}}</view>
+							<view class="mt-[auto] flex items-baseline justify-center w-full truncate price-font text-[#fff]">
+								<text class="text-[24rpx]">￥</text>
+								<text class="text-[44rpx] font-bold truncate">{{parseFloat(item.price)}}</text>
+							</view>
+						</view>
+						<view class="text-[#303133] text-[22rpx] truncate max-w-[120rpx] mt-[12rpx]">{{item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
+					</view>
+				</scroll-view>
+				<view  v-if="couponList.length == 1" class="bg-[#fff] box-border p-[10rpx] relative rounded-[20rpx] single-coupon flex-1" @click="couponItemLink(couponList[0])">
+					<view class="flex items-center coupon-item-content">
+						<view class="coupon-left flex items-center justify-center text-[#fff] w-[156rpx] mr-[30rpx]">
+							<text class="text-[24rpx]">￥</text>
+							<text class="text-[44rpx] font-[500]">{{parseFloat(couponList[0].price)}}</text>
+						</view>
+						<view class="flex flex-col">
+							<view class="text-[#fff] text-[28rpx] mb-[14rpx]">{{couponList[0].min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(couponList[0].min_condition_money)+'元可用') }}</view>
+							<view class="flex items-center">
+								<text class="bg-[#fff] mr-[10rpx] text-[red] text-[20rpx] px-[10rpx] py-[8rpx] rounded-[20rpx]">{{couponList[0].type_name}}</text>
+								<text class="text-[#fff] text-[24rpx]">店铺优惠券</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view v-else-if="diyComponent.style == 'style-4'" class="coupon-wrap style-4 relative" :style="couponStyle4Css">
+				<view class="desc flex items-center pt-[6rpx] pb-[26rpx]" @click="toLink('/addon/shop/pages/coupon/list')">
+					<text class="text-[32rpx] text-[#fff] font-500" :style="{color: diyComponent.titleColor}">{{ diyComponent.couponTitle }}</text>
+					<text class="text-[22rpx] text-[rgba(255,255,255,.8)] ml-[10rpx]" :style="{color: diyComponent.subTitleColor}">{{ diyComponent.couponSubTitle }}</text>
+				</view>
+				<scroll-view scroll-x="true" class="coupon-list">
+					<view v-for="(item,index) in couponList" :key="index" class="px-[10rpx] h-[120rpx] inline-flex items-center relative mr-[12rpx] coupon-item box-border min-w-[310rpx]" :style="{'background-color': diyComponent.couponItem.bgColor, 'border-radius': ((diyComponent.couponItem.aroundRadius*2)+'rpx')}" @click="couponItemLink(item)">
+						<view class="flex min-w-[110rpx] max-w-[120rpx] items-baseline justify-center truncate price-font mr-[10rpx]" :style="{'color': diyComponent.couponItem.moneyColor}">
+							<text class="text-[26rpx]">￥</text>
+							<text class="text-[46rpx] font-bold truncate">{{parseFloat(item.price)}}</text>
+						</view>
+						<view class="flex flex-col">
+							<view class="text-[28rpx] font-500" :style="{'color': diyComponent.couponItem.textColor}">{{item.type_name}}</view>
+							<view class="text-[#666] text-[24rpx] truncate max-w-[180rpx] mt-[12rpx]" :style="{'color': diyComponent.couponItem.subTextColor}">{{item.min_condition_money == '0.00' ? '无门槛' : ('满'+parseFloat(item.min_condition_money)+'元可用') }}</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</x-skeleton>
+</template>
+
+<script setup lang="ts">
+	// 优惠券组件
+	import { ref, reactive, computed, watch, onMounted } from 'vue';
+	import { img, redirect } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+	import { useLogin } from '@/hooks/useLogin';
+	import useMemberStore from '@/stores/member'
+    import { getShopCouponComponents,getCoupon } from '@/addon/shop/api/coupon';
+	
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
+	const diyStore = useDiyStore();
+	const memberStore = useMemberStore()
+	const userInfo = computed(() => memberStore.info)
+    const skeleton = reactive({
+        type: 'banner',
+        loading: false,
+        config: {
+            gridRows: 1,
+            gridRowsGap: '0rpx',
+            headHeight: '170rpx'
+        }
+    })
+
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+	
+	
+	const couponStyle4Css = computed(()=>{
+		var style = '';
+		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+		else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
+		return style;
+	})
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+    const toLink = (url: any)=>{
+        if (diyStore.mode == 'decorate') return;
+        redirect({ url })
+    }
+
+    const couponList: any = ref([])
+    const getShopCouponListFn = () => {
+        let data: object = {
+            num: diyComponent.value.source == 'all' ? diyComponent.value.num : '',
+            coupon_ids: diyComponent.value.source == 'custom' ? diyComponent.value.couponIds : '',
+        };
+        getShopCouponComponents(data).then((res: any) => {
+            couponList.value = res.data
+            skeleton.loading = false;
+
+	        // 数据为空时隐藏整个组件
+	        // if(couponList.value.length == 0) {
+		    //     diyComponent.value.pageStyle = '';
+	        // }
+        })
+    }
+	
+	const couponItemLink = (data:any)=> {
+		// redirect({ url: '/addon/shop/pages/coupon/detail', param: { coupon_id: data.id } })
+		collecting(data.id)
+	}
+
+    onMounted(() => {
+        refresh();
+    });
+
+    const refresh = () => {
+
+        // 装修模式下设置默认图
+        if (diyStore.mode == 'decorate') {
+            let obj = {
+                title: '满减券',
+                type_name: '通用券',
+                price: 100,
+                min_condition_money: 0,
+            };
+            for (let i = 0; i < 4; i++) {
+                couponList.value.push(obj);
+            }
+        } else {
+            getShopCouponListFn();
+        }
+    }
+	const collecting = (coupon_id: any) => {
+		if (diyStore.mode == 'decorate') return;
+	    if (!userInfo.value) {
+	        useLogin().setLoginBack({ url: '/addon/shop/pages/coupon/list' })
+	        return false
+	    }
+	    getCoupon({ coupon_id, number: 1 }).then(res => {
+	        // detail.value.btnType = 'using'
+	    })
+	}
+</script>
+
+<style lang="scss" scoped>
+	.coupon-wrap{
+		&.style-1{
+			.coupon-list{
+				position: relative;
+				height: 270rpx;
+				width: 100%;
+				white-space: nowrap;
+				padding: 30rpx 40rpx 0;
+				box-sizing: border-box;
+				&::before{
+					content: "";
+					position: absolute;
+					top: 0;
+					left: 20rpx;
+					right: 20rpx;
+					bottom: 0;
+					background: linear-gradient(#FEF9EC, #FCD9A5);
+					border-radius: 24rpx;
+				}
+			}
+			.coupon-buy-btn{
+				border-radius: 50rpx;
+			}
+		}
+		&.style-2{
+			.coupon-list{
+				position: relative;
+				height: 170rpx;
+				width: 100%;
+				white-space: nowrap;
+				padding: 20rpx 0 20rpx 20rpx;
+				box-sizing: border-box;
+				overflow: hidden;
+				background: linear-gradient(#EE3928, #EF3F30);
+			}
+			.coupon-buy-btn{
+				border-radius: 50rpx;
+			}
+		}
+		&.style-3{
+			display: flex;
+			align-items: center;
+			padding: 20rpx;
+			.desc{
+				padding-top: 12rpx;
+				height: 164rpx;
+				margin-right: 10rpx;
+				box-sizing: border-box;
+			}
+			.coupon-list{
+				flex: 1;
+				position: relative;
+				white-space: nowrap;
+				box-sizing: border-box;
+				overflow: hidden;
+				.coupon-item-content{
+					position: relative;
+					background: linear-gradient( 160deg, #FD5F2F 0%, #F6370F 100%);
+					width: 146rpx;
+					height: 108rpx;
+					border-radius: 12rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					padding: 12rpx 0 14rpx;
+					box-sizing: border-box;
+					&::after{
+						content: "";
+						position: absolute;
+						border: 12rpx solid #fff;
+						border-right-color: transparent;
+						border-top-color: transparent;
+						border-radius: 50%;
+						top: 50%;
+						transform: rotate(45deg) translateY(-50%);
+						right: -5rpx;
+					}
+					&::before{
+						content: "";
+						position: absolute;
+						border: 12rpx solid #fff;
+						border-left-color: transparent;
+						border-bottom-color: transparent;
+						border-radius: 50%;
+						top: 50%;
+						transform: rotate(45deg) translateY(-50%);
+						left: -22rpx;
+					}
+				}
+			}
+			.single-coupon{
+				.coupon-item-content{
+					position: relative;
+					background: linear-gradient( 160deg, #FD5F2F 0%, #F6370F 100%);
+					height: 144rpx;
+					border-radius: 12rpx;
+					padding: 12rpx 0 14rpx;
+					box-sizing: border-box;
+					&::after{
+						content: "";
+						position: absolute;
+						border: 14rpx solid #fff;
+						border-right-color: transparent;
+						border-top-color: transparent;
+						border-radius: 50%;
+						left: 139rpx;
+						transform: rotate(-45deg);
+						top: -18rpx;
+					}
+					&::before{
+						content: "";
+						position: absolute;
+						border: 14rpx solid #fff;
+						border-left-color: transparent;
+						border-bottom-color: transparent;
+						border-radius: 50%;
+						left: 139rpx;
+						transform: rotate(-45deg);
+						bottom: -16rpx;
+					}
+					.coupon-left{
+						position: relative;
+						&::after{
+							content: '';
+							position: absolute;
+							top: 50%;
+							right: 0;
+							transform: translateY(-50%);
+							border-right: 2rpx dashed #fff;
+							width: 2rpx;
+							height: 88rpx;
+						}
+					}
+				}
+			}
+			.coupon-buy-btn{
+				border-radius: 50rpx;
+			}
+		}
+		&.style-4{
+			padding: 20rpx 24rpx;
+			.coupon-list{
+				flex: 1;
+				position: relative;
+				white-space: nowrap;
+				box-sizing: border-box;
+				overflow: hidden;
+				.coupon-item{
+					width: calc(50% - 6rpx);
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/addon/shop/components/diy/goods-list/index.vue b/src/addon/shop/components/diy/goods-list/index.vue
new file mode 100644
index 0000000..144d70f
--- /dev/null
+++ b/src/addon/shop/components/diy/goods-list/index.vue
@@ -0,0 +1,441 @@
+<template>
+	<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">
+		<view :style="warpCss" class="overflow-hidden">
+			<view :style="maskLayer"></view>
+			<view :class="{'diy-shop-goods-list relative flex flex-wrap justify-between': diyComponent.style != 'style-2', 'biserial-goods-list': diyComponent.style == 'style-2'}">
+				<block v-if="diyComponent.style == 'style-1'">
+					<view class="bg-white w-full flex p-[20rpx] overflow-hidden" :class="{ 'mt-[20rpx]': index > 0 }" :style="itemCss" v-for="(item,index) in goodsList" :key="item.goods_id" @click="toLink(item)">
+						<u--image radius="var(--goods-rounded-big)" width="200rpx" height="200rpx" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
+							<template #error>
+								<image class="w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+							</template>
+						</u--image>
+						<view class="flex-1 flex flex-col ml-[20rpx] py-[6rpx] relative">
+							<view class="text-[28rpx] leading-[40rpx] text-[#303133] multi-hidden mb-[10rpx]" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">
+								<view class="brand-tag" v-if="item.goods_brand">
+									{{item.goods_brand.brand_name}}
+								</view>
+								{{item.goods_name}}
+							</view>
+							<view v-if="item.goods_label_name && item.goods_label_name.length && diyComponent.labelStyle.control" class="flex flex-wrap mb-[10rpx]">
+								<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+									<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+									<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+										{{tagItem.label_name}}
+									</view>
+								</template>
+							</view>
+							<view class="mt-auto flex justify-between items-center">
+								<view class="flex flex-col">
+									<view class="flex items-baseline leading-[1]" v-if="diyComponent.priceStyle.control">
+										<view class="font-bold text-[var(--price-text-color)] price-font block truncate max-w-[350rpx]" :style="{ color : diyComponent.priceStyle.color }">
+											<text class="text-[24rpx] font-500 mr-[4rpx]">￥</text>
+											<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2)}}</text>
+										</view>
+										<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+									</view>
+									<text v-if="diyComponent.saleStyle.control" class="mt-[8rpx] text-[22rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已售{{item.sale_num}}{{item.unit || '件'}}</text>
+								</view>
+								<view v-if="diyComponent.btnStyle.control" class="absolute right-[0] bottom-[0]">
+									<view v-if="diyComponent.btnStyle.style == 'button'" :style="goodsBtnCss" class="px-[18rpx] min-w-[100rpx] box-border h-[48rpx] flex items-center justify-center">
+										<text class="text-[20rpx]">{{diyComponent.btnStyle.text}}</text>
+									</view>
+									<view v-else :style="goodsBtnCss" class="w-[50rpx] h-[50rpx] rounded-[50%] flex items-center justify-center">
+										<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[30rpx]"></text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</block>
+				<block v-if="diyComponent.style == 'style-2'">
+					<view>
+						<template v-for="(item,index) in goodsList">
+							<view v-if="(index%2) == 0" class="flex flex-col bg-[#fff] box-border overflow-hidden" :class="{'mt-[24rpx]': index > 1}" :style="itemCss" @click="toLink(item)">
+								<u--image :width="style2Width" :height="style2Width" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
+									<template #error>
+										<image :style="{'width': style2Width,'height': style2Width}" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+								<view class="relative min-h-[44rpx] px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
+									<view class="text-[#303133] leading-[40rpx] text-[28rpx] multi-hidden" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">
+										<view class="brand-tag" v-if="item.goods_brand">
+											{{item.goods_brand.brand_name}}
+										</view>
+										{{item.goods_name}}
+									</view>
+									<view v-if="item.goods_label_name && item.goods_label_name.length && diyComponent.labelStyle.control" class="flex flex-wrap">
+										<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+											<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+											<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+												{{tagItem.label_name}}
+											</view>
+										</template>
+									</view>
+									<view class="flex justify-between flex-wrap items-center mt-[20rpx]">
+										<view class="flex flex-col">
+											<view class="flex items-baseline leading-[1]" v-if="diyComponent.priceStyle.control">
+												<view class="text-[var(--price-text-color)] price-font block truncate max-w-[270rpx]" :style="{ color : diyComponent.priceStyle.color }">
+													<text class="text-[24rpx] font-400">￥</text>
+													<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
+													<text class="text-[24rpx] font-500">.{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
+												</view>
+												<image  v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+											</view>
+											<text v-if="diyComponent.saleStyle.control" class="text-[22rpx] mt-[8rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已售{{item.sale_num}}{{item.unit || '件'}}</text>
+										</view>
+										<view class="absolute right-[16rpx] bottom-[16rpx]" v-if="diyComponent.btnStyle.control">
+											<view v-if="diyComponent.btnStyle.style == 'button'" :style="goodsBtnCss" class="px-[18rpx] h-[48rpx] flex items-center justify-center">
+												<text class="text-[20rpx]">{{diyComponent.btnStyle.text}}</text>
+											</view>
+											<view v-else :style="goodsBtnCss" class="w-[46rpx] h-[46rpx] rounded-[50%] flex items-center justify-center">
+												<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[30rpx]"></text>
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</template>
+					</view>
+					<view>
+						<template v-for="(item,index) in goodsList">
+							<view v-if="(index%2) == 1" class="flex flex-col bg-[#fff] box-border overflow-hidden" :class="{'mt-[24rpx]': index > 1}" :style="itemCss" @click="toLink(item)">
+								<u--image :width="style2Width" :height="style2Width" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
+									<template #error>
+										<image :style="{'width': style2Width,'height': style2Width}" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+								<view class="relative min-h-[44rpx] px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
+									<view class="text-[#303133] leading-[40rpx] text-[28rpx] multi-hidden" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">
+										<view class="brand-tag" v-if="item.goods_brand">
+											{{item.goods_brand.brand_name}}
+										</view>
+										{{item.goods_name}}
+									</view>
+									<view v-if="item.goods_label_name && item.goods_label_name.length && diyComponent.labelStyle.control" class="flex flex-wrap">
+										<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+											<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+											<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+												{{tagItem.label_name}}
+											</view>
+										</template>
+									</view>
+									<view class="flex justify-between flex-wrap items-center mt-[20rpx]">
+										<view class="flex flex-col">
+											<view class="flex items-baseline leading-[1]" v-if="diyComponent.priceStyle.control">
+												<view class="text-[var(--price-text-color)] price-font block truncate max-w-[270rpx]" :style="{ color : diyComponent.priceStyle.color }">
+													<text class="text-[24rpx] font-400">￥</text>
+													<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
+													<text class="text-[24rpx] font-500">.{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
+												</view>
+												<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+											</view>
+											<text v-if="diyComponent.saleStyle.control" class="text-[22rpx] mt-[8rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已售{{item.sale_num}}{{item.unit || '件'}}</text>
+										</view>
+										<view class="absolute right-[16rpx] bottom-[16rpx]" v-if="diyComponent.btnStyle.control">
+											<view v-if="diyComponent.btnStyle.style == 'button'" :style="goodsBtnCss" class="px-[18rpx] h-[48rpx] flex items-center justify-center">
+												<text class="text-[20rpx]">{{diyComponent.btnStyle.text}}</text>
+											</view>
+											<view v-else :style="goodsBtnCss" class="w-[46rpx] h-[46rpx] rounded-[50%] flex items-center justify-center">
+												<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[30rpx]"></text>
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</template>
+					</view>
+				</block>
+				<block v-if="diyComponent.style == 'style-3'">
+					<view :style="style3Css" v-if="goodsList.length">
+						<scroll-view :id="'warpStyle3-'+diyComponent.id" class="whitespace-nowrap min-h-[290rpx]" :scroll-x="true">
+							<view :id="'item'+index+diyComponent.id" class="w-[214rpx] mb-[6rpx] inline-block bg-[#fff] box-border overflow-hidden" :class="{'!mr-[0rpx]' : index == (goodsList.length-1)}" :style="itemCss+itemStyle3" v-for="(item,index) in goodsList" :key="item.goods_id" @click="toLink(item)">
+								<u--image width="214rpx" height="160rpx" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
+									<template #error>
+										<image class="w-[214rpx] h-[160rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+								<view class="relative min-h-[40rpx] px-[10rpx] pt-[16rpx] pb-[10rpx]">
+									<view class="text-[26rpx] text-[#303133] truncate" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }" v-if="diyComponent.goodsNameStyle.control">{{item.goods_name}}</view>
+									<view class="text-[var(--price-text-color)] pt-[16rpx] pb-[6rpx] font-bold price-font block truncate max-w-[160rpx] leading-[1] overflow-hidden" :style="{ color : diyComponent.priceStyle.color }" v-if="diyComponent.priceStyle.control">
+										<text class="text-[20rpx] font-400 mr-[2rpx]">￥</text>
+										<text class="text-[36rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item)).toFixed(2)}}</text>
+									</view>
+									<view v-if="diyComponent.btnStyle.control" class="absolute right-[10rpx] bottom-[12rpx]">
+										<view v-if="diyComponent.btnStyle.style != 'button'" :style="goodsBtnCss" class="w-[40rpx] h-[40rpx] rounded-[50%] flex items-center justify-center">
+											<text :class="[diyComponent.btnStyle.style]" class="nc-iconfont text-[28rpx]"></text>
+										</view>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+					
+				</block>
+			</view>
+		</view>
+	</x-skeleton>
+</template>
+
+<script setup lang="ts">
+	// 商品列表
+    import { ref,reactive,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
+	import { redirect, img, getToken } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+	import { getGoodsComponents } from '@/addon/shop/api/goods';
+	import {useGoods} from '@/addon/shop/hooks/useGoods'
+	
+	const diyGoods = useGoods();
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
+	const diyStore = useDiyStore();
+	const emits = defineEmits(['loadingFn']); //商品数据加载完成之后触发
+
+    const skeleton = reactive({
+        type: '',
+        loading: diyStore.mode == 'decorate' ? false : true,
+        config: {}
+    })
+
+	const goodsList = ref<Array<any>>([]);
+
+	const diyComponent = computed(() => {
+        if(props.value) {
+            return props.value;
+        }else if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+        style += 'position:relative;';
+		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+		else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
+
+        if(diyComponent.value.componentBgUrl) {
+            style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
+            style += 'background-size: cover;background-repeat: no-repeat;';
+        }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+    // 背景图加遮罩层
+    const maskLayer = computed(()=>{
+        var style = '';
+        if(diyComponent.value.componentBgUrl) {
+            style += 'position:absolute;top:0;width:100%;';
+            style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
+            style += `height:${height.value}px;`;
+
+            if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+            if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+            if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+            if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+        }
+
+        return style;
+    });
+
+    const itemCss = computed(() => {
+        var style = '';
+        if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
+        if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+		if(diyComponent.value.style == 'style-2'){
+			if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2);'
+			else style += 'width: calc((100vw - 20rpx) / 2 );'
+		}
+        return style;
+    })
+	
+	const goodsBtnCss = computed(() => {
+        var style = '';
+        if (diyComponent.value.btnStyle.style == 'button' && diyComponent.value.btnStyle.aroundRadius) style += 'border-radius:' + diyComponent.value.btnStyle.aroundRadius * 2 + 'rpx;';
+        if (diyComponent.value.btnStyle.startBgColor && diyComponent.value.btnStyle.endBgColor){
+			style += `background:linear-gradient(${diyComponent.value.btnStyle.startBgColor},${diyComponent.value.btnStyle.endBgColor});`;
+		}else{
+			style += 'background-color:' + (diyComponent.value.btnStyle.startBgColor || diyComponent.value.btnStyle.endBgColor) + ';';
+		}
+        if (diyComponent.value.btnStyle.textColor) style += 'color:' + diyComponent.value.btnStyle.textColor + ';';
+		if (diyComponent.value.btnStyle.style == 'button' && diyComponent.value.btnStyle.fontWeight) style += 'font-weight: bold;';
+        return style;
+    })
+	
+	const style2Width = computed(() => {
+		var style = '';
+		if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2)'
+		else style += 'calc((100vw - 20rpx) / 2 )'
+		return style;
+	})
+	
+	const style3Css = computed(() => {
+        var style = '';
+        style += 'padding:0 20rpx;';
+        if (diyComponent.value.margin && diyComponent.value.margin.both){style += 'width: calc(100vw - ' + ((diyComponent.value.margin.both * 4) + 40) + 'rpx);'}
+		else{style += 'box-sizing: border-box; width: 100vw;';}
+        return style;
+    })
+
+	//商品样式三
+	const itemStyle3 = ref('');
+	const setItemStyle3 = ()=>{
+		// #ifdef MP-WEIXIN
+			uni.createSelectorQuery().in(instance).select('#warpStyle3-'+diyComponent.value.id).boundingClientRect((res:any) => {
+				uni.createSelectorQuery().in(instance).select('#item0'+diyComponent.value.id).boundingClientRect((data:any) => {
+					itemStyle3.value = `margin-right:${(res.width - data.width*3)/2}px;`
+				}).exec()
+			}).exec()
+		// #endif
+		// #ifdef H5
+			itemStyle3.value= 'margin-right:14rpx;'
+		// #endif
+	}
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	const getGoodsListFn = () => {
+        let data = {
+            num: (diyComponent.value.source == 'all' || diyComponent.value.source == 'category') ? diyComponent.value.num : '',
+            goods_ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : '',
+            goods_category: diyComponent.value.source == 'category' ? diyComponent.value.goods_category : '',
+            order: diyComponent.value.sortWay
+        }
+        getGoodsComponents(data).then((res) => {
+            goodsList.value = res.data;
+
+	        // 数据为空时隐藏整个组件
+	        // if(goodsList.value.length == 0 && diyComponent.value.pageStyle) {
+		    //     diyComponent.value.pageStyle = '';
+	        // }
+
+            skeleton.loading = false;
+			emits('loadingFn', res.data)
+            if(diyComponent.value.componentBgUrl) {
+                setTimeout(() => {
+                    const query = uni.createSelectorQuery().in(instance);
+                    query.select('.diy-shop-goods-list').boundingClientRect((data: any) => {
+                        if(data) height.value = data.height;
+                    }).exec();
+                }, 1000)
+            }
+			nextTick(()=>{
+				setTimeout(()=>{
+					if(diyComponent.value.style == 'style-3') setItemStyle3()
+				},500)
+			})
+        });
+    }
+
+	const initSkeleton = ()=> {
+        if (diyComponent.value.style == 'style-1') {
+
+            // 单列 风格
+            skeleton.type = 'list'
+            skeleton.type = 'list'
+            skeleton.config = {
+                textRows: 2
+            };
+        } else if (diyComponent.value.style == 'style-2') {
+
+            // 两列 风格
+            skeleton.type = 'waterfall'
+            skeleton.config = {
+                headHeight: '320rpx',
+                gridRows: 1,
+                textRows: 2,
+                textWidth: ['100%', '80%']
+            };
+        } else if (diyComponent.value.style == 'style-3') {
+
+            // 横向滑动 风格
+            skeleton.type = 'waterfall'
+            skeleton.config = {
+                gridRows: 1,
+                gridColumns: 3,
+                headHeight: '200rpx',
+                textRows: 2,
+                textWidth: ['100%', '80%']
+            };
+        }
+    }
+
+    const instance = getCurrentInstance();
+    const height = ref(0)
+
+	onMounted(() => {
+		refresh();
+        // 装修模式下刷新
+        if (diyStore.mode == 'decorate') {
+            watch(
+                () => diyComponent.value,
+                (newValue, oldValue) => {
+                    if (newValue && newValue.componentName == 'GoodsList') {
+                        nextTick(() => {
+                            const query = uni.createSelectorQuery().in(instance);
+                            query.select('.diy-shop-goods-list').boundingClientRect((data: any) => {
+                                if(data) height.value = data.height;
+                            }).exec();
+							if(diyComponent.value.style == 'style-3') setItemStyle3()
+                        })
+                    }
+                }
+            )
+        }else{
+            watch(
+                () => diyComponent.value,
+                (newValue, oldValue) => {
+                    refresh();
+                },
+                {deep: true}
+            )
+        }
+	});
+
+	const refresh = () => {
+		// 装修模式下设置默认图
+		if (diyStore.mode == 'decorate') {
+			let obj = {
+				goods_cover_thumb_mid: "",
+				goods_name: "商品名称",
+				sale_num: "100",
+				unit: "件",
+				goodsSku:{price:100}
+			};
+			goodsList.value.push(obj);
+			goodsList.value.push(obj);
+			nextTick(()=>{
+				if(diyComponent.value.style == 'style-3') setItemStyle3()
+			})
+		}else{
+            initSkeleton();
+			getGoodsListFn();
+		}
+
+	}
+
+	const toLink = (data: any) => {
+		redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
+	}
+</script>
+<style lang="scss" scoped>
+    @import '@/addon/shop/styles/common.scss';
+	.biserial-goods-list{
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 10px;
+	}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/components/diy/many-goods-list/index.vue b/src/addon/shop/components/diy/many-goods-list/index.vue
new file mode 100644
index 0000000..73293f1
--- /dev/null
+++ b/src/addon/shop/components/diy/many-goods-list/index.vue
@@ -0,0 +1,347 @@
+<template>
+	<view class="overflow-hidden">
+		<scroll-view scroll-x="true" class="many-goods-list-head" :class="diyComponent.headStyle" :scroll-into-view="'a' + cateIndex" :style="warpCss">
+			<template v-if="diyComponent.headStyle == 'style-3'">
+				<template v-if="diyComponent.source == 'custom'">
+					<view v-for="(item,index) in diyComponent.list" :key="index" :class="['flex-col inline-flex items-center justify-center', { 'pr-[40rpx]': (index != diyComponent.list.length-1) }]" @click="changeCateIndex(item,index)">
+						<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': index == cateIndex }]" v-if="item.imageUrl" :src="img(item.imageUrl)" mode="aspectFit"/>
+						<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': index == cateIndex }]" v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" />
+						<text :class="['text-[28rpx] mt-[16rpx]', {'font-500 text-[var(--primary-color)]' : index == cateIndex  }]">{{ item.title }}</text>
+					</view>
+				</template>
+				<template v-else-if="diyComponent.source == 'goods_category'">
+					<view class="pr-[40rpx] inline-flex flex-col items-center justify-center" @click="changeGoodsCategory({ category_id : 0 })">
+						<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': currentCategoryId == 0}]" :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" />
+						<text :class="['text-[28rpx] mt-[16rpx]', {'font-500 text-[var(--primary-color)]': currentCategoryId == 0}]">全部</text>
+					</view>
+					<view v-for="(item,index) in goodsCategoryListData" :key="index" :class="['flex-col inline-flex items-center justify-center', { 'pr-[40rpx]': (index != goodsCategoryListData.length-1) }]" @click="changeGoodsCategory(item)">
+						<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': currentCategoryId == item.category_id}]" v-if="item.image" :src="img(item.image)" mode="aspectFit"/>
+						<image :style="{ borderRadius : (diyComponent.aroundRadius * 2) + 'rpx' }" :class="['w-[90rpx] h-[90rpx] overflow-hidden border-[2rpx] border-solid border-transparent', {'border-[var(--primary-color)]': currentCategoryId == item.category_id}]" v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" />
+						<text :class="['text-[28rpx] mt-[16rpx]', {'font-500 text-[var(--primary-color)]' : currentCategoryId == item.category_id}]">{{ item.category_name }}</text>
+					</view>
+				</template>
+			</template>
+			<template v-else>
+				<view v-for="(item, index) in diyComponent.list" class="scroll-item" :class="[diyComponent.headStyle, { active: index == cateIndex }]" :id="'a' + index" :key="index" @click="changeCateIndex(item, index)">
+					<view class="cate" v-if="diyComponent.headStyle == 'style-1'">
+						<view class="name">{{ item.title }}</view>
+						<view class="desc" :v-if="item.desc">{{ item.desc }}</view>
+					</view>
+					<view v-if="diyComponent.headStyle == 'style-2'" class="cate">
+						<view class="name">{{ item.title }}</view>
+						<text class="nc-iconfont nc-icon-xiaolian-2 !text-[40rpx] text-[var(--primary-color)] transform" v-if="index == cateIndex"></text>
+					</view>
+					<view v-if="diyComponent.headStyle == 'style-4'" class="cate">
+						<view class="name">{{ item.title }}</view>
+					</view>
+				</view>
+			</template>
+		</scroll-view>
+
+		<diy-goods-list class="many-goods-list-body" v-if="goodsValue" :value="goodsValue"></diy-goods-list>
+
+	</view>
+</template>
+
+<script setup lang="ts">
+	// 多商品组 组件
+	import { ref, computed, watch, onMounted } from 'vue';
+	import { img } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+    import diyGoodsList from '@/addon/shop/components/diy/goods-list/index.vue';
+    import { getGoodsCategoryList } from '@/addon/shop/api/goods';
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
+	const diyStore = useDiyStore();
+
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	onMounted(() => {
+		refresh();
+        // 装修模式下刷新
+        if (diyStore.mode == 'decorate') {
+            watch(
+                () => diyComponent.value,
+                (newValue, oldValue) => {
+                    if (newValue && newValue.componentName == 'ManyGoodsList') {
+                        refresh();
+                    }
+                }
+            )
+        }
+	});
+
+	const refresh = () => {
+        // 装修模式下设置默认图
+		if(diyComponent.value.headStyle == 'style-3' && diyComponent.value.source == 'goods_category' && diyComponent.value.goods_category){
+            getGoodsCategoryFn(diyComponent.value.goods_category);
+		}else{
+            changeCateIndex(diyComponent.value.list[0], 0,true)
+		}
+    }
+
+    const cateIndex = ref(0) // 当前选中的分类id
+
+    const goodsValue:any = ref(null);
+
+	const changeCateIndex = (item:any, index:any, isFirst:any = false)=> {
+        // 装修模式禁止跳转
+        if (diyStore.mode == 'decorate' && !isFirst) return;
+
+        cateIndex.value = index;
+        refreshGoodsList({
+            source: item.source,
+            goods_category: item.goods_category,
+            goods_ids: item.goods_ids
+        })
+    }
+
+    const goodsCategoryListData = ref([])
+    const currentCategoryId = ref(0) // 当前选中的分类id
+
+    // 获取商品分类列表
+    const getGoodsCategoryFn = (pid:any)=> {
+        getGoodsCategoryList({
+            pid
+        }).then(res => {
+            if (res.code == 1) {
+                goodsCategoryListData.value = res.data;
+                if (goodsCategoryListData.value) {
+                    refreshGoodsList({
+                        source: 'category',
+                        goods_category: ''
+                    });
+                }
+            }
+        })
+    }
+
+    // 切换商品分类，查询商品列表数据
+    const changeGoodsCategory = (item :any)=> {
+        // 装修模式禁止跳转
+        if (diyStore.mode == 'decorate') return;
+        currentCategoryId.value = item.category_id
+        refreshGoodsList({
+            source: 'category',
+            goods_category: currentCategoryId.value
+        });
+    }
+
+    const refreshGoodsList = (obj:any)=> {
+        goodsValue.value = {
+            style: diyComponent.value.style,
+            margin: diyComponent.value.margin,
+            source: obj.source,
+
+            num: diyComponent.value.num,
+            sortWay: diyComponent.value.sortWay,
+
+            goodsNameStyle: diyComponent.value.goodsNameStyle,
+            priceStyle: diyComponent.value.priceStyle,
+            saleStyle: diyComponent.value.saleStyle,
+            btnStyle: diyComponent.value.btnStyle,
+			labelStyle: diyComponent.value.labelStyle,
+
+            elementBgColor: diyComponent.value.elementBgColor,
+            topElementRounded: diyComponent.value.topElementRounded,
+            bottomElementRounded: diyComponent.value.bottomElementRounded
+        };
+
+        if (obj.goods_category) {
+            goodsValue.value.goods_category = obj.goods_category
+        }
+        if (obj.goods_ids && obj.goods_ids.length) {
+            goodsValue.value.goods_ids = obj.goods_ids
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+	.many-goods-list-head {
+		left: 0;
+		right: 0;
+		z-index: 5;
+		width: 100%;
+		white-space: nowrap;
+		box-sizing: border-box;
+		padding: 20rpx 0 10rpx;
+		margin-bottom:20rpx;
+		position: relative;
+
+		&.style-1{
+			padding: 26rpx 0 14rpx;
+		}
+
+		&.style-2{
+			height: 100rpx;
+			padding: 20rpx 0 16rpx;
+		}
+
+		&.style-3{
+			padding: 26rpx 20rpx;
+			background-color: #fff;
+			margin-bottom: 20rpx;
+			width: 100%;
+			white-space: nowrap;
+			box-sizing: border-box;
+		}
+		
+		&.style-4{
+			padding-bottom: 0;
+		}
+
+		.scroll-item {
+			display: inline-block;
+			text-align: center;
+			width: auto;
+			padding: 0 20rpx;
+
+			&.style-1{
+				&:first-child {
+					width: calc(25% - 20rpx);
+					padding-left: 0;
+				}
+				
+				&.active {
+					.name{
+						color: var(--primary-color);
+						font-weight: 500;
+					}
+					.desc {
+						color: #ffffff;
+						border-radius: 20rpx;
+						background-color: var(--primary-color);
+					}
+				}
+				
+				.name {
+					font-size: 30rpx;
+					color: #333;
+					line-height: 1;
+				}
+				
+				.cate {
+					display: inline-block;
+				}
+				
+				.desc {
+					font-size: 22rpx;
+					color: #999;
+					height: 38rpx;
+					line-height: 38rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-top: 10rpx;
+					min-width: 110rpx;
+					max-width: 220rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					padding: 0 10rpx;
+				}
+			}
+
+			&.style-2{
+				.cate{
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					position: relative;
+				}
+				.name{
+					font-size: 28rpx;
+					color: #333;
+					line-height: 32rpx;
+				}
+				&.active {
+					.name{
+						color:var(--primary-color);
+						font-weight: 500;
+					}
+					.nc-iconfont{
+						position: absolute;
+						bottom: -35rpx;
+					}
+				}
+			}
+			&.style-4{
+				padding: 0 10rpx 14rpx;
+				.cate{
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					position: relative;
+					padding: 10rpx 12rpx;
+					background-color: #F6F6F6;
+					border-radius: 12rpx;
+					min-width: 136rpx;
+					box-sizing: border-box;
+					border: 2rpx solid #F6F6F6;
+				}
+				.name{
+					font-size: 28rpx;
+					color: #333;
+					line-height: 32rpx;
+				}
+				&.active {
+					.cate{
+						background-color: var(--primary-color-light);
+						border-color: var(--primary-color);
+						position: relative;
+						&::after{
+							content: "";
+							width: 18rpx;
+							height: 18rpx;
+							position: absolute;
+							background-color: var(--primary-color-light);
+							border: 2rpx solid transparent;
+							border-bottom-color: var(--primary-color);
+							border-right-color: var(--primary-color);
+							bottom: -12rpx;
+							left: 50%;
+							transform: translateX(-50%) rotate(45deg);
+							border-bottom-right-radius: 10rpx;
+						}
+					}
+					.name{
+						color: var(--primary-color);
+						font-weight: 500;
+					}
+					.nc-iconfont{
+						position: absolute;
+						bottom: -35rpx;
+					}
+				}
+			}
+		}
+
+	}
+
+</style>
diff --git a/src/addon/shop/components/diy/shop-exchange-goods/index.vue b/src/addon/shop/components/diy/shop-exchange-goods/index.vue
new file mode 100644
index 0000000..640446c
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-exchange-goods/index.vue
@@ -0,0 +1,241 @@
+<template>
+	<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">
+		<view class="overflow-hidden" :style="warpCss">
+			<view :style="maskLayer"></view>
+			<view class="diy-shop-exchange-goods-list relative flex flex-wrap justify-between" v-if="goodsList.length">
+				<view class="overflow-hidden bg-[#fff] flex flex-col box-border w-[calc(50%-10rpx)] rounded-[var(--rounded-mid)]" :class="{'mt-[20rpx]': index > 1}" :style="itemCss" v-for="(item,index) in goodsList" :key="item.goods_id" @click="toLink(item)">
+					<u--image :width="style2Width" :height="style2Width" radius="var(--rounded-mid)" :src="img(item.goods_cover_thumb_mid || '')" model="aspectFill">
+						<template #error>
+							<image class="rounded-[var(--rounded-mid)] overflow-hidden" :style="{'width': style2Width,'height': style2Width}" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+						</template>
+					</u--image>
+					<view class="flex-1 pt-[10rpx] pb-[20rpx] px-[16rpx] flex flex-col justify-between">
+						<view class="text-[#333] leading-[40rpx] text-[28rpx] multi-hidden" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }">{{item.names}}</view>
+						<view class="text-[22rpx] leading-[28rpx] mt-[10rpx] text-[var(--text-color-light9)]" :style="{ color : diyComponent.saleStyle.color }">已兑{{item.total_exchange_num}}人</view>
+						<view class="flex justify-between flex-wrap items-center mt-[16rpx]" >
+							<view class="flex flex-col">
+								<view :style="{ color : diyComponent.priceStyle.mainColor }" class="text-[var(--price-text-color)] price-font ml-[2rpx] flex items-baseline">
+									<text class="text-[32rpx]">{{ item.point  }}</text>
+									<text class="text-[24rpx] ml-[4rpx]">积分</text>
+								</view>
+								<view v-if="item.price&&item.price>0" class="flex items-center mt-[6rpx] price-font">
+									<text :style="{ color : diyComponent.priceStyle.mainColor }" class="text-[#333] font-400 text-[32rpx]">+{{ parseFloat(item.price).toFixed(2)  }}</text>
+									<text :style="{ color : diyComponent.priceStyle.mainColor }" class="text-[var(--price-text-color)] font-400 ml-[4rpx] text-[24rpx]">元</text>
+								</view>
+							</view>
+							<view class="w-[120rpx] h-[54rpx] text-[22rpx] flex-center !text-[#fff] m-0 rounded-full primary-btn-bg remove-border text-center" shape="circle">去兑换</view>
+						</view>
+					</view>
+				</view>
+			</view>
+            <view v-else-if="!goodsList.length" class="empty-page">
+                <image class="img" :src="img('static/resource/images/system/empty.png')" model="aspectFit" />
+                <view class="desc">暂无商品</view>
+            </view>
+		</view>
+	</x-skeleton>
+</template>
+
+<script setup lang="ts">
+	// 积分商品列表
+    import { ref,reactive,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
+	import { redirect, img } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+	import { getExchangeComponentsList } from '@/addon/shop/api/point';
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
+	const diyStore = useDiyStore();
+
+    const skeleton = reactive({
+        type: '',
+        loading: diyStore.mode == 'decorate' ? false : true,
+        config: {}
+    })
+
+	const goodsList = ref<Array<any>>([]);
+
+	const diyComponent = computed(() => {
+        if(props.value) {
+            return props.value;
+        }else if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+        style += 'position:relative;';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+
+        if(diyComponent.value.componentBgUrl) {
+            style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
+            style += 'background-size: cover;background-repeat: no-repeat;';
+        }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+    // 背景图加遮罩层
+    const maskLayer = computed(()=>{
+        var style = '';
+        if(diyComponent.value.componentBgUrl) {
+            style += 'position:absolute;top:0;width:100%;';
+            style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
+            style += `height:${height.value}px;`;
+
+            if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+            if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+            if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+            if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+        }
+
+        return style;
+    });
+
+    const itemCss = computed(() => {
+        var style = '';
+        if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+        return style;
+    })
+
+	const style2Width = computed(() => {
+		var style = '';
+		if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2)'
+		else style += 'calc((100vw - 20rpx) / 2 )'
+		return style;
+	})
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	const getGoodsListFn = () => {
+        let data = {
+            order: diyComponent.value.sortWay,
+            num: diyComponent.value.source == 'all' ? diyComponent.value.num : '',
+            ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids.join(',') : '',
+        }
+        getExchangeComponentsList(data).then((res) => {
+            goodsList.value = res.data;
+            skeleton.loading = false;
+
+	        // 数据为空时隐藏整个组件
+	        // if(goodsList.value.length == 0) {
+		    //     diyComponent.value.pageStyle = '';
+	        // }
+            if(diyComponent.value.componentBgUrl) {
+                setTimeout(() => {
+                    const query = uni.createSelectorQuery().in(instance);
+                    query.select('.diy-shop-exchange-goods-list').boundingClientRect((data: any) => {
+                        height.value = data.height;
+                    }).exec();
+                }, 1000)
+            }
+        });
+    }
+
+	const initSkeleton = ()=> {
+        if (diyComponent.value.style == 'style-1') {
+
+            // 单列 风格
+            skeleton.type = 'list'
+            skeleton.type = 'list'
+            skeleton.config = {
+                textRows: 2
+            };
+        } else if (diyComponent.value.style == 'style-2') {
+
+            // 两列 风格
+            skeleton.type = 'waterfall'
+            skeleton.config = {
+                headHeight: '320rpx',
+                gridRows: 1,
+                textRows: 2,
+                textWidth: ['100%', '80%']
+            };
+        } else if (diyComponent.value.style == 'style-3') {
+
+            // 横向滑动 风格
+            skeleton.type = 'waterfall'
+            skeleton.config = {
+                gridRows: 1,
+                gridColumns: 3,
+                headHeight: '200rpx',
+                textRows: 2,
+                textWidth: ['100%', '80%']
+            };
+        }
+    }
+
+    const instance = getCurrentInstance();
+    const height = ref(0)
+
+	onMounted(() => {
+		refresh();
+        // 装修模式下刷新
+        if (diyStore.mode == 'decorate') {
+            watch(
+                () => diyComponent.value,
+                (newValue, oldValue) => {
+                    if (newValue && newValue.componentName == 'ShopExchangeGoods') {
+                        nextTick(() => {
+                            const query = uni.createSelectorQuery().in(instance);
+                            query.select('.diy-shop-exchange-goods-list').boundingClientRect((data: any) => {
+                                height.value = data.height;
+                            }).exec();
+                        })
+                    }
+                }
+            )
+        }else{
+            watch(
+                () => diyComponent.value,
+                (newValue, oldValue) => {
+                    refresh();
+                },
+                {deep: true}
+            )
+        }
+	});
+
+	const refresh = () => {
+		// 装修模式下设置默认图
+		if (diyStore.mode == 'decorate') {
+			let obj = {
+				image: "",
+				names: "商品名称",
+				total_exchange_num: 100,
+				point: 100,
+				price:100
+			};
+			goodsList.value.push(obj);
+			goodsList.value.push(obj);
+		}else{
+            initSkeleton();
+			getGoodsListFn();
+		}
+	}
+
+	const toLink = (data: any) => {
+		redirect({ url: '/addon/shop/pages/point/detail', param: { id: data.id } })
+	}
+
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/addon/shop/components/diy/shop-exchange-info/index.vue b/src/addon/shop/components/diy/shop-exchange-info/index.vue
new file mode 100644
index 0000000..485fc1e
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-exchange-info/index.vue
@@ -0,0 +1,131 @@
+<template>
+	<view :style="warpCss" class="shop-exchange-info-wrap">
+		<view class="pl-[60rpx] pt-[71rpx] pb-[133rpx] min-h-[382rpx] box-border text-[#fff]">
+			<!-- #ifdef MP-WEIXIN -->
+			<view :style="navbarInnerStyle"></view>
+			<!-- #endif -->
+			<template v-if="token">
+				<view class="text-[34rpx] leading-[48rpx]">我的积分</view>
+				<view class="text-[80rpx] font-500 price-font leading-[112rpx]">{{memberPoint.point||0}}</view>
+				<view class="text-[24rpx] font-400 leading-[34rpx]">今日获得：{{memberPoint.today_point||0}}</view>
+			</template>
+			<template v-else>
+				<view class="pt-[42rpx] title">积分当钱花</view>
+				<view class="text-[26rpx] leading-[36rpx] text-[#FEF2C0] mt-[10rpx]">做任务可领积分</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { computed, ref, watch,onMounted } from 'vue'
+	import { getExchangePoint } from '@/addon/shop/api/point';
+	import { img, getToken } from '@/utils/common';
+	import { t } from '@/locale'
+	import useDiyStore from '@/app/stores/diy'
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount','global']);
+
+	const diyStore = useDiyStore();
+	const loading = ref(true)
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+		if (diyComponent.value.bgUrl) {
+			style += 'background-image:url(' + img(diyComponent.value.bgUrl) + ');';
+			style += 'background-size: 100%;';
+			style += 'backgroundPosition: bottom;';
+			style += 'background-repeat: no-repeat;';
+		}
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+
+		return style;
+	})
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	onMounted(() => {
+		refresh();
+	});
+
+	watch(
+	    () => diyComponent.value,
+		(newValue, oldValue) => {
+            refresh();
+    },{deep: true})
+
+	const memberPoint :Record<string, any> = ref({})
+
+	const token = ref(getToken())
+
+	const refresh = () => {
+        // 装修模式
+        if (diyStore.mode == 'decorate') {
+            memberPoint.value = {
+                point: 10500,
+                today_point: 500,
+            }
+        } else {
+            if (!token) {
+                return;
+            }
+            getExchangePointFn()
+        }
+    }
+
+	const getExchangePointFn= async()=> {
+        const res = await getExchangePoint()
+        memberPoint.value = res.data
+		loading.value = false
+    }
+
+	let menuButtonInfo: any = {};
+	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+	// #endif
+
+// 导航栏内部盒子的样式
+const navbarInnerStyle = computed(() => {
+    let style = '';
+    // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+    // #ifdef MP
+    if (props.global.topStatusBar.isShow == false) {
+        style += 'height:' + menuButtonInfo.height + 'px;';
+        style += 'padding-top:' + menuButtonInfo.top + 'px;';
+    }
+    // #endif
+    return style;
+})
+</script>
+
+<style lang="scss" scoped>
+.title{
+	width: 240rpx;
+	height: 58rpx;
+	font-family: FZLanTingHei-EB-GBK, FZLanTingHei-EB-GBK;
+	font-weight: 700;
+	font-size: 48rpx;
+	line-height: 56rpx;
+	text-align: left;
+	color: transparent;
+	background: linear-gradient(90.00002732075491deg, #FFFDF0 5%, #FEF1B9 88%);
+	-webkit-background-clip: text; /* 确保背景色可以应用到文字上 */
+	background-clip: text;
+}
+</style>
diff --git a/src/addon/shop/components/diy/shop-goods-ranking/index.vue b/src/addon/shop/components/diy/shop-goods-ranking/index.vue
new file mode 100644
index 0000000..aa27ed9
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-goods-ranking/index.vue
@@ -0,0 +1,199 @@
+<template>
+	<view :style="warpCss" class="overflow-hidden">
+		<scroll-view scroll-x="true" class="w-[100%] whitespace-nowrap">
+			<view class="flex items-start">
+				<view class="inline-block" v-for="(item,index) in diyComponent.list" :key="index">
+					<view class="w-[460rpx] px-[20rpx] pb-[20rpx] pt-[20rpx] flex flex-col items-start" :class="{'mr-[20rpx]': (diyComponent.list.length-1) != index}" :style="swiperItemCss(item)" v-if="listGoods[item.rankIds[0]] && listGoods[item.rankIds[0]].length > 0">
+						<view class="flex items-center h-[50rpx]">
+							<image class="w-[30rpx] h-[30rpx] mr-[10rpx]" v-if="item.imgUrl" :src="img(item.imgUrl)" mode="aspectFill"></image>
+							<view :style="{'color': item.textColor}">
+								<text class="text-[30rpx] font-bold" v-if="item.text">{{ item.text }}</text>
+								<text class="text-[30rpx] font-bold" v-else>{{ listGoodsNames[item.rankIds[0]] }}</text>
+							</view>
+
+						</view>
+						<view class="mb-[6rpx] h-[35rpx]" :style="{'color': item.subTitle.textColor}" @click="diyStore.toRedirect(item.subTitle.link)">
+							<text class="text-[24rpx]" v-if="item.subTitle.text">{{item.subTitle.text}}</text>
+							<text class="iconfont iconyouV6xx !text-[24rpx]" v-if="item.subTitle.text"></text>
+						</view>
+						<view class="mt-[30rpx]">
+							<view class="flex bg-[#fff] p-[10rpx] rounded-[16rpx] mb-[16rpx]"  v-for="(goods, gIndex) in listGoods[item.rankIds[0]]"  :class="{'mb-0': gIndex === listGoods[item.rankIds[0]].length - 1}" @click="toDetail(goods.goods_id)">
+								<view class="relative w-[130rpx] h-[130rpx] mr-[16rpx]">
+									<image class="absolute top-[6rpx] left-[8rpx] w-[30rpx] h-[36rpx]" :style="{ zIndex:2 }" :src="getRankBadge(goods.rank_num)" mode="aspectFill"></image>
+									<view class="absolute top-[2rpx] left-[-3rpx] flex items-center justify-center w-[50rpx] h-[50rpx]"  :style="{ zIndex: 3 }">
+									  <text class="text-[20rpx] font-bold text-[#fff]">{{ goods.rank_num }}</text>
+									</view>
+									<u--image radius="var(--goods-rounded-big)" width="130rpx" height="130rpx" :src="img(goods.goods_cover_thumb_mid || '')" model="aspectFill">
+										<template #error>
+											<image class="w-[130rpx] h-[130rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+										</template>
+									</u--image>
+								</view>
+								<view class="flex flex-col">
+									<view class="leading-[1.3] multi-hidden w-[290rpx] text-[28rpx] whitespace-normal">{{goods.goods_name}}</view>
+									<view class="flex items-center justify-between mt-[auto]">
+										<view class="text-[var(--price-text-color)] price-font flex items-baseline">
+											<text class="text-[24rpx] font-500">￥</text>
+											<text class="text-[40rpx] font-500">{{ diyGoods.goodsPrice(goods).toFixed(2).split('.')[0] }}</text>
+											<text class="text-[24rpx] font-500">.{{ diyGoods.goodsPrice(goods).toFixed(2).split('.')[1] }}</text>
+										</view>
+										<view>
+											<text class="iconfont icongouwuche3 text-[var(--primary-color)] border-[2rpx] border-solid border-[var(--primary-color)] rounded-[50%] text-[22rpx] p-[6rpx]"></text>
+										</view>
+
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	// 排行榜
+    import { ref,reactive,computed, watch, onMounted } from 'vue';
+	import useDiyStore from '@/app/stores/diy';
+	import { redirect, img } from '@/utils/common';
+    import { getRankComponentsGoodsList } from '@/addon/shop/api/rank'
+	import { useGoods } from '@/addon/shop/hooks/useGoods'
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
+	const diyGoods = useGoods();
+	const diyStore = useDiyStore();
+
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+        style += 'position:relative;';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+	const swiperItemCss = (data: any)=> {
+		var style = '';
+		if (data.listFrame.startColor) {
+			if (data.listFrame.startColor && data.listFrame.endColor) style += 'background: linear-gradient(90deg, ' + data.listFrame.startColor + ', ' + data.listFrame.endColor + ');';
+			else style = 'background-color:' + data.listFrame.startColor + ';';
+		}
+		if (data.bgUrl) {
+			style += 'background-image:' + 'url(' + img(data.bgUrl) + ');';
+			style += 'background-size: 100%;';
+			style += 'background-repeat: no-repeat;';
+		}
+
+		if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+		if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+		return style;
+	}
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	watch(
+	    () => diyComponent.value,
+		(newValue, oldValue) => {
+	        refresh();
+	},{deep: true})
+
+	const refresh = () => {
+		// 装修模式下刷新
+		if (diyStore.mode == 'decorate') {
+			if(diyComponent.value.componentName == 'ShopGoodsRanking') {
+				const fakeGoods = {
+					goods_name: '商品名称',
+					goods_cover_thumb_mid: '',
+					goodsSku: {
+						price: 10
+					},
+					rank_num: 0  // 初始化为 0，后续会递增
+				};
+				diyComponent.value.list.forEach(item => {
+					if (!item.goodsList) {
+						item.goodsList = [];
+					}
+
+					if (item.goodsList.length === 0) {
+						const fakeGoodsList = [];
+						// 生成三个商品，并为每个商品的 rank_num 递增
+						for (let i = 0; i < 3; i++) {
+							const newItem = { ...fakeGoods, rank_num: i + 1 };  // rank_num 从 1 开始递增
+							fakeGoodsList.push(newItem);
+						}
+						listGoods[item.rankIds[0]] = fakeGoodsList;
+					}
+				});
+			}
+		} else {
+			getRankGoodsListFn();
+		}
+
+	};
+
+	const listGoods = reactive({});
+	const listGoodsNames = reactive({});
+	const getRankGoodsListFn = () => {
+		diyComponent.value.list.forEach((item) => {
+			const rank_id = Array.isArray(item.rankIds) ? item.rankIds[0] : 0;
+			const data = {
+				rank_id: item.source === 'custom' ? rank_id : 0
+			};
+			getRankComponentsGoodsList(data).then((res) => {
+				if (res.data && res.data.goods_list.length > 0) {
+					listGoods[item.rankIds[0]] = res.data.goods_list;
+					listGoodsNames[item.rankIds[0]] = res.data.name;
+				}
+			}).catch((error) => {
+				console.error('获取商品数据失败:', error);
+			});
+
+		});
+	};
+
+	function getRankBadge(sort: any) {
+		switch (sort) {
+			case 1:
+				return img('addon/shop/rank/rank_first.png');
+			case 2:
+				return img('addon/shop/rank/rank_second.png');
+			case 3:
+				return img('addon/shop/rank/rank_third.png');
+			default:
+				return img('addon/shop/rank/rank.png');
+		}
+	}
+	const toDetail = (id: string | number) => {
+		redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: id }, mode: 'navigateTo' })
+	}
+
+	onMounted(() => {
+	  refresh();
+	});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/addon/shop/components/diy/shop-goods-recommend/index.vue b/src/addon/shop/components/diy/shop-goods-recommend/index.vue
new file mode 100644
index 0000000..00e6c50
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-goods-recommend/index.vue
@@ -0,0 +1,208 @@
+<template>
+	<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">
+		<view :style="warpCss"  v-if="goodsNum">
+			<view class="w-full">
+				<scroll-view :id="'warpStyle-'+diyComponent.id" class="whitespace-nowrap h-[341rpx] w-full" :scroll-x="true">
+					<block v-for="(item,index) in goodsList" :key="index">
+						<view v-if="item.info" :id="'item'+index+diyComponent.id" class="w-[224rpx] h-[341rpx] mr-[20rpx] inline-block bg-[#fff] box-border overflow-hidden" :class="{'!mr-[0rpx]' : index == (goodsList.length-1)}" :style="itemCss+itemStyle" @click="toLink(item)">
+							<view class="w-full h-[134rpx]" :style="listFrameStyle(item)">
+								<view class="flex pl-[16rpx] pr-[20rpx] justify-between h-[63rpx] items-center">
+									<view class="text-[28rpx] leading-[34rpx] flex-1 mr-[8rpx]" :style="{'color':item.title.textColor}">{{item.title.text}}</view>
+									<view class="w-[68rpx] h-[34rpx] text-[22rpx] text-center leading-[34rpx] text-[#fff] rounded-[17rpx]" :style="moreTitleStyle(item)">{{item.moreTitle.text}}</view>
+								</view>
+							</view>
+							<view class="mt-[-71rpx] h-[278rpx] w-full px-[20rpx] pt-[18rpx] box-border bg-white" :style="itemCss">
+								<view class="flex items-center justify-center w-[184rpx] h-[184rpx]">
+									<u--image width="184rpx" height="184rpx" :radius="'var(--goods-rounded-small)'" :src="img(item.info.goods_cover_thumb_mid || '')" model="aspectFill">
+										<template #error>
+											<image class="w-[184rpx] h-[184rpx] rounded-[var(--goods-rounded-small)]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+										</template>
+									</u--image>
+								</view>
+								<view class="pt-[12rpx]">
+									<view class="h-[44rpx] pl-[4rpx] min-w-[168rpx] box-border flex justify-between items-center mx-auto border-[2rpx] border-solid border-[var(--primary-color)] rounded-[20rpx]" :style="{'border-color':item.button.color}">
+										<view class="text-[var(--price-text-color)] font-bold price-font flex items-baseline leading-[40rpx] flex-1 justify-center" >
+											<view class="leading-[1] max-w-[105rpx] truncate" :style="{ color : diyComponent.priceStyle.mainColor }">
+												<text class="text-[18rpx] font-400 mr-[2rpx]">￥</text>
+												<text class="text-[28rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item.info.goodsSku)).toFixed(2)}}</text>
+											</view>
+										</view>
+										<view class="w-[70rpx] box-border text-right text-[#fff] pr-[8rpx] text-[22rpx] font-500 leading-[44rpx] rounded-tr-[20rpx] rounded-br-[20rpx] rounded-tl-[24rpx] relative" :style="{'background-color':item.button.color}">
+											<text>{{item.button.text}}</text>
+											<image class="w-[24rpx] h-[44rpx] absolute top-[-2rpx] left-0" :src="img('/addon/shop/Union.png')" />
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</scroll-view>
+
+			</view>
+		</view>
+	</x-skeleton>
+</template>
+
+<script setup lang="ts">
+	// 商品推荐
+    import { ref,reactive,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
+	import { redirect, img, deepClone } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+	import { getGoodsComponents } from '@/addon/shop/api/goods';
+	import {useGoods} from '@/addon/shop/hooks/useGoods'
+
+	const diyGoods = useGoods();
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
+	const diyStore = useDiyStore();
+	const emits = defineEmits(['loadingFn']); //商品数据加载完成之后触发
+
+	const goodsNum = ref(0);
+
+    const skeleton = reactive({
+        type: '',
+        loading: false,
+        config: {}
+    })
+
+	const goodsList = ref<Array<any>>([]);
+
+	const diyComponent = computed(() => {
+        if(props.value) {
+            return props.value;
+        }else if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+	const warpCss = computed(() => {
+		var style = '';
+        style += 'position:relative;';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+    const itemCss = computed(() => {
+        var style = '';
+        if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
+        if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+        return style;
+    })
+
+	//listFrame样式
+	const listFrameStyle = (item:any)=>{
+		var style= '';
+		 if(item.listFrame.startColor){
+			if(item.listFrame.startColor && item.listFrame.endColor) style = `background:linear-gradient( 110deg, ${item.listFrame.startColor} 0%, ${item.listFrame.endColor} 100%);`;
+			else style = 'background-color:' + item.listFrame.startColor + ';';
+		 }
+		 return style
+	}
+	//moreTitle样式
+	const moreTitleStyle = (item:any)=>{
+		var style= '';
+		 if(item.moreTitle.startColor){
+			if(item.moreTitle.startColor && item.moreTitle.endColor) style = `background:linear-gradient( 0deg, ${item.moreTitle.startColor} 0%, ${item.moreTitle.endColor} 100%);`;
+			else style = 'background-color:' + item.moreTitle.startColor + ';';
+		 }
+		 return style
+	}
+	//商品样式
+	const itemStyle = ref('');
+	const setItemStyle = ()=>{
+		// #ifdef  MP-WEIXIN
+			// uni.createSelectorQuery().in(instance).select('#warpStyle-'+diyComponent.value.id).boundingClientRect((res:any) => {
+			// 	uni.createSelectorQuery().in(instance).select('#item0'+diyComponent.value.id).boundingClientRect((data:any) => {
+			// 		itemStyle.value = `margin-right:${(res.width - data.width*3)/2}px;`
+			// 	}).exec()
+			// }).exec()
+		// #endif
+		// #ifdef  H5
+			// itemStyle.value= 'margin-right:19rpx;'
+		// #endif
+		if(diyComponent.value.margin && diyComponent.value.margin.both) itemStyle.value = 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 40rpx) / 3);'
+		else itemStyle.value = 'width: calc((100vw - 40rpx) / 3 );'
+	}
+
+	setItemStyle();
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	const getGoodsListFn = () => {
+        let data: any = {}
+        if(diyComponent.value.source == 'all') {
+	        data.num = diyComponent.value.list.length;
+        }else if(diyComponent.value.source == 'custom') {
+	        data.goods_ids = diyComponent.value.goods_ids;
+        }
+
+        getGoodsComponents(data).then((res) => {
+			let goodsObj = res.data;
+			goodsNum.value = goodsObj.length || 0;
+            diyComponent.value.list.filter((el:any, index)=>{
+				el.info=deepClone(goodsObj[index])
+			});
+			goodsList.value = deepClone(diyComponent.value.list)
+            skeleton.loading = false;
+        });
+    }
+
+	const instance = getCurrentInstance();
+
+	onMounted(() => {
+		refresh();
+	});
+	watch(
+	    () => diyComponent.value,
+	    (newValue, oldValue) => {
+	        refresh();
+	    },
+	)
+	const refresh = () => {
+		// 装修模式下设置默认图
+		if (diyStore.mode == 'decorate') {
+			nextTick(() => {
+				if(diyComponent.value && diyComponent.value.list){
+					goodsList.value = diyComponent.value.list.map((el:any)=>{
+						let obj = deepClone(el)
+						obj.info={
+							goods_cover_thumb_mid:'',
+							goodsSku:{
+								price:'10.00'
+							}
+						}
+						return obj
+					})
+					goodsNum.value = 3;
+					setItemStyle()
+				}
+			})
+		}else{
+			getGoodsListFn();
+		}
+	}
+
+	const toLink = (data: any) => {
+		redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.info.goods_id } })
+	}
+
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/addon/shop/components/diy/shop-member-info/index.vue b/src/addon/shop/components/diy/shop-member-info/index.vue
new file mode 100644
index 0000000..0f62b99
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-member-info/index.vue
@@ -0,0 +1,260 @@
+<template>
+	<view :style="warpCss">
+		<view class="px-[30rpx] pt-[30rpx] box-border pb-[30rpx]" :class="{'!pb-[120rpx]':diyComponent.isShowAccount}">
+			<!-- #ifdef MP-WEIXIN -->
+			<view :style="navbarInnerStyle"></view>
+			<!-- #endif -->
+			<view v-if="info" class="flex items-center">
+				<!-- 唤起获取微信 -->
+				<u-avatar :src="img(info.headimg)" :size="'110rpx'" leftIcon="none" :default-url="img('static/resource/images/default_headimg.png')" @click="clickAvatar" />
+				<view class="ml-[20rpx] flex-1">
+					<view class="text-[#ffffff] flex items-baseline flex-wrap" :style="{ color : diyComponent.textColor }">
+						<view class="text-[32rpx] truncate max-w-[320rpx] font-500 leading-[38rpx]">{{ info.nickname }}</view>
+						<view class="text-[26rpx] font-400 leading-[28rpx] ml-[10rpx]" v-if="info.mobile">{{info.mobile.replace(info.mobile.substring(3,7), "****")}}</view>
+
+						<!-- #ifdef H5 -->
+						<view v-else-if="!info.mobile" @click="bindMobileFn" class="text-[22rpx] ml-[10rpx] px-[6rpx] border-[1rpx] border-solid border-[#E3E4E9] rounded-[8rpx] h-[34rpx] flex-center" :style="diyComponent.textColor ? { boxShadow: '0 0 0 1rpx ' + diyComponent.textColor, border: 'none' } : {}">{{ t('bindMobile') }}</view>
+						<!-- #endif -->
+
+						<!-- #ifdef MP-WEIXIN -->
+						<button v-else-if="!info.mobile" class="text-[22rpx] ml-[10rpx] bg-[#fff] px-[6rpx] border-[1rpx] border-solid border-[#E3E4E9] rounded-[8rpx] h-[37rpx] flex-center mr-0" :style="diyComponent.textColor ? { boxShadow: '0 0 0 1rpx ' + diyComponent.textColor, border: 'none' } : {}" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">{{t('bindMobile')}}</button>
+						<!-- #endif -->
+
+					</view>
+					<view class="text-[#666] text-[24rpx] font-400 leading-[28rpx] mt-[14rpx]" :style="{ color : diyComponent.uidTextColor }">UID：{{ info.member_no }}</view>
+				</view>
+				<text @click="redirect({ url: '/app/pages/setting/index' })" class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]" :style="{ color : diyComponent.textColor }"></text>
+			</view>
+			<view v-else class="flex items-center">
+				<u-avatar :src="img('static/resource/images/default_headimg.png')" :size="'100rpx'" @click="toLogin" />
+				<view class="ml-[20rpx] flex-1" @click="toLogin">
+					<view class="text-[32rpx] font-500 leading-[38rpx]" :style="{ color : diyComponent.textColor }">
+						{{ t('login') }}/{{ t('register') }}
+					</view>
+				</view>
+				<view @click="redirect({ url: '/app/pages/setting/index' })">
+					<text class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]" :style="{ color : diyComponent.textColor }"></text>
+				</view>
+			</view>
+			<view class="flex mt-[40rpx] items-center" v-if="diyComponent.isShowAccount">
+				<view class="text-center w-[33.333%] flex-shrink-0">
+					<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
+						<view @click="redirect({url: '/app/pages/member/balance'})" :style="{ color : diyComponent.textColor }">{{ money }}</view>
+					</view>
+					<view class="text-[22rpx] font-400">
+						<view @click="redirect({url: '/app/pages/member/balance'})" :style="{ color : '#666' }">{{ t('balance') }}</view>
+					</view>
+				</view>
+				<view class="text-center w-[33.333%] flex-shrink-0">
+					<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
+						<view @click="redirect({url: '/app/pages/member/point'})" :style="{ color : diyComponent.textColor }">{{ parseInt(info?.point) || 0 }}</view>
+					</view>
+					<view class="text-[22rpx] font-400">
+						<view @click="redirect({url: '/app/pages/member/point'})" :style="{ color : '#666' }">{{ t('point') }}</view>
+					</view>
+				</view>
+				<view class="text-center w-[33.333%] flex-shrink-0" @click="redirect({ url: '/addon/shop/pages/member/my_coupon' })">
+					<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
+						<view :style="{ color : diyComponent.textColor }">{{ couponCount }}</view>
+					</view>
+					<view class="text-[22rpx] font-400">
+						<view :style="{ color : '#666' }">{{ t('coupon') }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<information-filling ref="infoFillRef"></information-filling>
+		<!-- #endif -->
+
+		<!-- 强制绑定手机号 -->
+		<bind-mobile ref="bindMobileRef" />
+
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { computed, ref, watch } from 'vue'
+	import useMemberStore from '@/stores/member'
+	import { useLogin } from '@/hooks/useLogin'
+	import { getMyCouponCount } from '@/addon/shop/api/coupon'
+	import { img, isWeixinBrowser, redirect, urlDeconstruction, moneyFormat } from '@/utils/common'
+	import { t } from '@/locale'
+	import { wechatSync } from '@/app/api/system'
+	import useDiyStore from '@/app/stores/diy'
+    import useConfigStore from '@/stores/config'
+	import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount','global']);
+
+	const configStore = useConfigStore()
+	const diyStore = useDiyStore();
+
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+		if (diyComponent.value.bgUrl) {
+			style += 'background-image:url(' + img(diyComponent.value.bgUrl) + ');';
+			style += 'background-size: 100%;';
+			style += 'background-repeat: no-repeat;';
+		}
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+
+		return style;
+	})
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	const memberStore = useMemberStore()
+
+	// #ifdef H5
+	const { query } = urlDeconstruction(location.href)
+	if (query.code && isWeixinBrowser()) {
+		setTimeout(() =>{
+			wechatSync({ code: query.code }).then(res => {
+				memberStore.getMemberInfo()
+			})
+		},1500)
+	}
+	// #endif
+
+	const info = computed(() => {
+		// 装修模式
+		if (diyStore.mode == 'decorate') {
+			return {
+                headimg: '',
+                nickname: '昵称',
+                member_level_name: '普通会员',
+                balance: 0,
+                point: 0,
+                money: 0,
+                mobile: '155****0549',
+                member_no: 'NIU0000021'
+            }
+		} else {
+			getMyCouponCountFn()
+			return memberStore.info;
+		}
+	})
+
+	const money = computed(() => {
+		if (info.value) {
+			let m = parseFloat(info.value.balance) + parseFloat(info.value.money)
+			return moneyFormat(m.toString());
+		} else {
+			return 0;
+		}
+	})
+
+	const toLogin = () => {
+		let normalLogin = !configStore.login.is_username && !configStore.login.is_mobile && !configStore.login.is_bind_mobile; // 未开启普通登录
+		let authRegisterLogin = !configStore.login.is_auth_register; // 自动注册登录
+
+		// #ifdef H5
+		if (isWeixinBrowser()) {
+			// 微信浏览器
+			if (normalLogin && authRegisterLogin) {
+				uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
+			} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
+				useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
+			} else if (normalLogin && configStore.login.is_auth_register) {
+				// 判断是否开启第三方自动注册登录
+				useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
+			}
+		} else {
+			// 普通浏览器
+			if (normalLogin) {
+				uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
+			} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
+				useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
+			}
+		}
+		// #endif
+
+		// #ifdef MP
+		if (normalLogin && authRegisterLogin) {
+			uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
+		} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
+			useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
+		} else if (normalLogin && configStore.login.is_auth_register) {
+			// 判断是否开启第三方自动注册登录
+			useLogin().getAuthCode()
+		}
+		// #endif
+
+	}
+
+	const infoFillRef:any = ref(false)
+	const clickAvatar = () => {
+		// #ifdef MP-WEIXIN
+		infoFillRef.value.show = true
+		// #endif
+
+		// #ifdef H5
+		if (isWeixinBrowser()) {
+			useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
+		} else {
+			redirect({ url: '/app/pages/member/personal' })
+		}
+		// #endif
+	}
+
+	const couponCount = ref(0)
+	const getMyCouponCountFn= async()=>{
+		try {
+			const res = await getMyCouponCount({status:1})
+			couponCount.value = res.data
+		} catch (e){
+			couponCount.value = 0
+		}
+
+	}
+
+	//强制绑定手机号
+    const bindMobileRef: any = ref(null)
+	const bindMobileFn = () =>{
+		bindMobileRef.value.open()
+	}
+
+	let menuButtonInfo: any = {};
+	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+	// #endif
+
+	// 导航栏内部盒子的样式
+	const navbarInnerStyle = computed(() => {
+		let style = '';
+		// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+		// #ifdef MP
+	    if (props.global.topStatusBar.isShow == false) {
+	        style += 'height:' + menuButtonInfo.height + 'px;';
+	        style += 'padding-top:' + menuButtonInfo.top + 'px;';
+	    }
+		// #endif
+		return style;
+	})
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/addon/shop/components/diy/shop-newcomer/index.vue b/src/addon/shop/components/diy/shop-newcomer/index.vue
new file mode 100644
index 0000000..7202f5a
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-newcomer/index.vue
@@ -0,0 +1,476 @@
+<template>
+	<view class="shop-newcomer overflow-hidden" :style="warpCss" v-if="list && Object.keys(list).length">
+		<view class="style-1 p-[20rpx]" v-if="diyComponent.style.value == 'style-1'">
+			<view class="head flex justify-between items-center mb-[16rpx]" @click="toListFn()">
+				<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
+				<view class="time-wrap flex items-center ml-[auto]" v-show="timeData && Object.keys(timeData).length">
+					<text v-if="!getToken() && diyStore.mode != 'decorate'" class="text-[26rpx]" :style="{color: diyComponent.countDown.otherColor}">活动未开始</text>
+					<block v-else-if="activeState()">
+						<text :style="{color: diyComponent.countDown.otherColor}" class="mr-[10rpx] text-[24rpx]">距结束还有</text>
+						<up-count-down class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="HH:mm:ss" @change="onChange">
+							<view class="flex">
+								<view class="text-[24rpx] flex items-center">
+									<text class="time-num font-500" :style="countDownTextCss" v-if="dayTransitionHours()">{{ dayTransitionHours() }}</text>
+									<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+									<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[6rpx] mr-[7rpx]">:</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
+									<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+									<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[6rpx] mr-[7rpx]">:</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.seconds">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
+									<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+								</view>
+							</view>
+						</up-count-down>
+					</block>
+					<text v-else class="text-[28rpx]" :style="{color: diyComponent.countDown.otherColor}">活动已结束</text>
+				</view>
+			</view>
+			<scroll-view scroll-x="true" class="content">
+				<view class="flex">
+					<view class="inline-flex bg-[#fff] p-[16rpx] box-border" :style="commonTempCss()" @click="toDetail(list[0])">
+						<view class="w-[150rpx] h-[150rpx] flex items-center justify-center">
+							<u--image radius="var(--goods-rounded-big)" width="150rpx" height="150rpx" :src="img(list[0].sku_image || '')" model="aspectFill">
+								<template #error>
+									<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+								</template>
+							</u--image>
+						</view>
+						<view class="flex flex-col ml-[20rpx] py-[4rpx] flex-1">
+							<view class="text-[26rpx] w-[200rpx] whitespace-pre-wrap leading-[1.4] multi-hidden" v-if="list[0].goods">{{list[0].goods.goods_name}}</view>
+							<view class="flex items-center justify-between mt-[auto]">
+								<view class="flex flex-1 items-center">
+									<text class="text-[20rpx] text-[#FF0000]">￥</text>
+									<text class="text-[28rpx] font-500 text-[#FF0000] max-w[120rpx] truncate">{{goodsPrice(list[0])}}</text>
+								</view>
+								<text class="italic flex items-center justify-center rounded-[40rpx] w-[60rpx] h-[40rpx] leading-1 text-[#fff] font-bold first-btn-bg">抢</text>
+							</view>
+						</view>
+					</view>
+					<block v-for="(item,index) in list" :key="index">
+						<view v-if="index > 0" class="ml-[10rpx] inline-flex flex-col items-center p-[16rpx] bg-[#fff] box-border" :style="commonTempCss()" @click="toDetail(item)">
+							<view class="w-[110rpx] h-[110rpx] flex items-center justify-center">
+								<u--image radius="var(--goods-rounded-big)" width="110rpx" height="110rpx" :src="img(item.sku_image || '')" model="aspectFill">
+									<template #error>
+										<image class="w-[110rpx] h-[110rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+							</view>
+							<view class="flex items-center mt-[auto]">
+								<text class="text-[24rpx] font-500">￥</text>
+								<text class="text-[24rpx] font-500 truncate">{{goodsPrice(item)}}</text>
+							</view>
+						</view>
+					</block>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="style-2 p-[20rpx]" v-if="diyComponent.style.value == 'style-2'">
+			<view class="head flex justify-between items-center mb-[16rpx]" @click="toListFn()">
+				<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
+				<view class="time-wrap flex items-center ml-[auto]" v-show="timeData && Object.keys(timeData).length">
+					<text v-if="!getToken() && diyStore.mode != 'decorate'" class="text-[26rpx]" :style="{color: diyComponent.countDown.otherColor}">活动未开始</text>
+					<block v-else-if="activeState()">
+						<text :style="{color: diyComponent.countDown.otherColor}" class="mr-[10rpx] text-[24rpx]">倒计时</text>
+						<up-count-down class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="DD:HH:mm" @change="onChange">
+							<view class="flex">
+								<view class="text-[24rpx] flex items-center">
+									<text class="time-num" :style="countDownTextCss" v-if="timeData.days">{{ timeData.days }}</text>
+									<text class="time-num" :style="countDownTextCss" v-else>0</text>
+									<text :style="{color: diyComponent.countDown.otherColor}" class="text-[22rpx] ml-[6rpx] mr-[7rpx]">天</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="time-num" :style="countDownTextCss" v-if="timeData.hours">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
+									<text class="time-num" :style="countDownTextCss" v-else>00</text>
+									<text :style="{color: diyComponent.countDown.otherColor}" class="text-[22rpx] ml-[6rpx] mr-[7rpx]">时</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="time-num" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
+									<text class="time-num" :style="countDownTextCss" v-else>00</text>
+									<text :style="{color: diyComponent.countDown.otherColor}" class="text-[22rpx] ml-[6rpx] mr-[7rpx]">分</text>
+								</view>
+							</view>
+						</up-count-down>
+					</block>
+					<text v-else class="text-[28rpx]" :style="{color: diyComponent.countDown.otherColor}">活动已结束</text>
+				</view>
+			</view>
+			<scroll-view scroll-x="true" class="content">
+				<view class="flex">
+					<view v-for="(item,index) in list" :key="index" class="item-bg mr-[10rpx] inline-flex flex-col items-center p-[6rpx] bg-[#fff] box-border" :style="commonTempCss()" @click="toDetail(item)">
+						<view class="flex items-center justify-center w-[146rpx] h-[146rpx]">
+							<u--image radius="var(--goods-rounded-small)" width="146rpx" height="146rpx" :src="img(item.sku_image || '')" model="aspectFill">
+								<template #error>
+									<image class="w-[146rpx] h-[146rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+								</template>
+							</u--image>
+						</view>
+						<image class="h-[32rpx] w-[auto] mt-[12rpx] mb-[8rpx]" :src="img('addon/shop/diy/newcomer/style_2_img.png')" mode="heightFix"></image>
+						<view class="flex items-center text-[#fff] pb-[4rpx]">
+							<text class="text-[20rpx] font-500">￥</text>
+							<text class="text-[30rpx] max-w-[120rpx] font-500 truncate">{{goodsPrice(item)}}</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="style-3 pt-[20rpx] pb-[10rpx] px-[10rpx]" v-if="diyComponent.style.value == 'style-3'">
+			<view class="head flex mx-[10rpx] items-center mb-[12rpx]" @click="toListFn()">
+				<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto] mr-[16rpx]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
+				<view class="time-wrap flex items-center" v-show="timeData && Object.keys(timeData).length">
+					<text v-if="!getToken() && diyStore.mode != 'decorate'" :style="{color: diyComponent.countDown.otherColor}" class="text-[26rpx]">活动未开始</text>
+					<up-count-down v-else-if="activeState()" class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="HH:mm:ss" @change="onChange">
+						<view class="flex">
+							<view class="text-[24rpx] flex items-center">
+								<text class="time-num font-500" :style="countDownTextCss" v-if="dayTransitionHours()">{{ dayTransitionHours() }}</text>
+								<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+								<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] font-bold ml-[6rpx] mr-[7rpx]">:</text>
+							</view>
+							<view class="text-[24rpx] flex items-center">
+								<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
+								<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+								<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] font-bold ml-[6rpx] mr-[7rpx]">:</text>
+							</view>
+							<view class="text-[24rpx] flex items-center">
+								<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.seconds">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
+								<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+							</view>
+						</view>
+					</up-count-down>
+					<text v-else :style="{color: diyComponent.countDown.otherColor}" class="text-[26rpx]">活动已结束</text>
+				</view>
+				<view class="ml-[auto] rounded-[20rpx] flex items-baseline pl-[16rpx] pr-[10rpx] pt-[10rpx] pb-[10rpx]" :style="subTitleCss" @click.stop="diyStore.toRedirect(diyComponent.subTitle.link)">
+					<text class="text-[22rpx]">{{diyComponent.subTitle.text}}</text>
+					<text class="iconfont iconarrow-right !text-[18rpx] font-bold"></text>
+				</view>
+			</view>
+			<scroll-view scroll-x="true" class="content bg-[#fff] box-border p-[16rpx] rounded-[var(--rounded-small)]">
+				<view class="flex">
+					<view v-for="(item,index) in list" :key="index" class="item-bg inline-flex flex-col items-center box-border" :class="{'mr-[16rpx]': index != (list.length-1)}" :style="commonTempCss()" @click="toDetail(item)">
+						<view class="bg-[#f8f8f8] flex items-center justify-center w-[152rpx] h-[152rpx]">
+							<u--image radius="var(--goods-rounded-small)" width="152rpx" height="152rpx" :src="img(item.sku_image || '')" model="aspectFill">
+								<template #error>
+									<image class="w-[152rpx] h-[152rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+								</template>
+							</u--image>
+						</view>
+						<image class="h-[32rpx] w-[auto] mt-[12rpx] mb-[10rpx]" :src="img('addon/shop/diy/newcomer/style_3_img.png')" mode="heightFix"></image>
+						<view class="flex items-center text-[#FF0E00] pb-[2rpx]">
+							<text class="text-[20rpx] font-500">￥</text>
+							<text class="text-[30rpx] max-w-[120rpx] font-500 truncate">{{goodsPrice(item)}}</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="style-4 p-[20rpx] pt-[24rpx]" v-if="diyComponent.style.value == 'style-4'"  :style="{ background: 'url(' + img('addon/shop/diy/newcomer/style_4_head.png') + ') no-repeat'}">
+			<view class="head flex mx-[10rpx] items-center justify-between mb-[24rpx]">
+				<image v-if="diyComponent.textImg" class="h-[34rpx] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix"></image>
+				<view class="time-wrap ml-[auto] flex items-center -mt-[8rpx]" v-show="timeData && Object.keys(timeData).length">
+					<text v-if="!getToken() && diyStore.mode != 'decorate'" :style="{color: diyComponent.countDown.otherColor}" class="w-[200rpx] text-center text-[26rpx] pb-[4rpx]">活动未开始</text>
+					<block v-else-if="activeState()">
+						<text :style="{color: diyComponent.countDown.otherColor}" class="mr-[8rpx] text-[24rpx]">本场仅剩</text>
+						<up-count-down class="text-[#fff] text-[28rpx]" :time="newcomerTime" format="HH:mm:ss" @change="onChange">
+							<view class="flex">
+								<view class="text-[28rpx] flex items-center">
+									<text class="time-num font-500" :style="countDownTextCss" v-if="dayTransitionHours()">{{ dayTransitionHours() }}</text>
+									<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+									<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[4rpx] font-bold mr-[5rpx]">:</text>
+								</view>
+								<view class="text-[28rpx] flex items-center">
+									<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.minutes">{{ timeData.minutes >= 10?timeData.minutes:'0'+timeData.minutes }}</text>
+									<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+									<text :style="{color: diyComponent.countDown.otherColor}" class="text-[20rpx] ml-[4rpx] font-bold mr-[5rpx]">:</text>
+								</view>
+								<view class="text-[28rpx] flex items-center">
+									<text class="time-num font-500" :style="countDownTextCss" v-if="timeData.seconds">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
+									<text class="time-num font-500" :style="countDownTextCss" v-else>00</text>
+								</view>
+							</view>
+						</up-count-down>
+					</block>
+					<text v-else :style="{color: diyComponent.countDown.otherColor}" class="w-[200rpx] text-center text-[24rpx] pb-[4rpx]">活动已结束</text>
+				</view>
+			</view>
+			<scroll-view scroll-x="true" class="content">
+				<view class="flex">
+					<view v-for="(item,index) in list" :key="index" class="item-bg inline-flex flex-col items-center box-border" :class="{'mr-[20rpx]': index != (list.length-1)}" :style="commonTempCss()" @click="toDetail(item)">
+						<view class="relative flex items-center justify-center w-[100%] h-[130rpx] pt-[40rpx] mb-[10rpx]">
+							<u--image radius="var(--goods-rounded-small)" width="130rpx" height="130rpx" :src="img(item.sku_image || '')" model="aspectFill">
+								<template #error>
+									<image class="w-[130rpx] h-[130rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+								</template>
+							</u--image>
+							<view class="content-sign text-[20rpx] text-[#fff]">新人价</view>
+						</view>
+						<view class="w-[210rpx] relative -right-[2rpx] -bottom-[2rpx] flex items-center text-[#FF0E00] pb-[2rpx]">
+							<view class="flex items-center justify-center flex-1">
+								<text class="text-[20rpx] font-500">￥</text>
+								<text class="text-[36rpx] max-w-[140rpx] font-500 truncate">{{goodsPrice(item)}}</text>
+							</view>
+							<text class="btn-bg ml-auto">抢</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	// 新人专享
+    import { ref,reactive,computed, onMounted } from 'vue';
+	import { redirect, img, getToken } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+    import { getNewcomersComponentsList } from '@/addon/shop/api/newcomer'
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
+	const diyStore = useDiyStore();
+
+	const diyComponent = computed(() => {
+        if(props.value) {
+            return props.value;
+        }else if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	/********* 倒计时 - start ***********/
+	// 使用 reactive 创建响应式对象
+	const timeData = ref({});
+	// 定义 onChange 方法
+	const onChange = (e) => {
+	  timeData.value = e;
+	};
+	const newcomerTime: any = ref('');
+	/********* 倒计时 - end ***********/
+
+	const goodsPrice = (data: any)=> {
+		let price: any = 0;
+		if (data && data.newcomer_price) {
+			price = Number(data.newcomer_price).toFixed(2);
+		}
+		return price;
+	}
+
+	// 将天转换成时
+	const dayTransitionHours = ()=>{
+		let num = timeData.value.days * 24 + timeData.value.hours;
+		num = num ? num : 0;
+		num = num >=10 ? num : '0' + num;
+		return num;
+	}
+
+	// 活动状态
+	const activeState = ()=>{
+		let bool = true;
+		if(diyStore.mode != 'decorate' && timeData.value.days <= 0 && timeData.value.hours <= 0 && timeData.value.minutes <= 0 && timeData.value.seconds <= 0 && timeData.value.milliseconds <= 0){
+			bool = false;
+		}
+		return bool;
+	}
+
+	const warpCss = computed(() => {
+		var style = '';
+        style += 'position:relative;';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+	// 倒计时样式
+	const countDownTextCss = computed(() => {
+		var style = '';
+	    if(diyComponent.value.countDown && diyComponent.value.countDown.numberBg) {
+			if (diyComponent.value.countDown.numberBg.startColor && diyComponent.value.countDown.numberBg.endColor) style += `background:linear-gradient(${diyComponent.value.countDown.numberBg.startColor},${diyComponent.value.countDown.numberBg.endColor});`;
+			else{
+				style += 'background-color:' + (diyComponent.value.countDown.numberBg.startColor || diyComponent.value.countDown.numberBg.endColor) + ';';
+			}
+	    }
+		if (diyComponent.value.countDown.numberColor) style += 'color:' + diyComponent.value.countDown.numberColor + ';';
+		return style;
+	})
+	
+	
+	// 公共模块颜色
+	const commonTempCss = ()=>{
+		var style = '';
+		if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+		if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+		return style;
+	}
+
+	// 副标题样式
+	const subTitleCss = computed(() => {
+		var style = '';
+	    if(diyComponent.value.subTitle) {
+			if (diyComponent.value.subTitle.startColor && diyComponent.value.subTitle.endColor) style += `background:linear-gradient(to right, ${diyComponent.value.subTitle.startColor},${diyComponent.value.subTitle.endColor});`;
+			else{
+				style += 'background-color:' + (diyComponent.value.subTitle.startColor || diyComponent.value.subTitle.endColor) + ';';
+			}
+	    }
+		if (diyComponent.value.subTitle.textColor) style += 'color:' + diyComponent.value.subTitle.textColor + ';';
+		return style;
+	})
+
+	const list: any = ref([])
+	const getNewcomerListFn = () => {
+		let data = {
+			limit: diyComponent.value.source == 'all' ? diyComponent.value.num : '',
+			sku_ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : ''
+		}
+		getNewcomersComponentsList(data).then((res: any) => {
+			newcomerTime.value = res.data.validity_time;
+			let now = new Date();
+			let timestamp: any = now.getTime();
+			newcomerTime.value = Number(newcomerTime.value) * 1000 - timestamp;
+
+			list.value = res.data.goods_list
+
+			// 数据为空时隐藏整个组件
+			// if(!(list.value.length && (newcomerTime.value > 0 && isJoin.value == 0))) {
+			// 	diyComponent.value.pageStyle = '';
+			// }
+
+		})
+	}
+
+	onMounted(() => {
+		// 装修模式下刷新
+		if (diyStore.mode == 'decorate') {
+			let obj = {
+				goods: {
+					goods_name: "商品名称"
+				},
+				sku_image: "",
+				newcomer_price: 0.01
+			};
+			list.value.push(obj);
+			list.value.push(obj);
+			list.value.push(obj);
+		} else {
+			getNewcomerListFn();
+		}
+	});
+
+	// 跳转专享列表
+	const toListFn = ()=>{
+		redirect({ url: '/addon/shop/pages/newcomer/list'})
+	}
+	// 跳转详情
+	const toDetail = (data: any)=> {
+		redirect({ url: '/addon/shop/pages/goods/detail', param: { sku_id: data.sku_id, type: 'newcomer_discount' } })
+	}
+</script>
+
+<style lang="scss" scoped>
+	.shop-newcomer{
+		.style-1{
+			.content{
+				white-space: nowrap;
+			}
+			.first-btn-bg{
+				background: linear-gradient( 140deg, #FF9C24 0%, #FF4837 100%);
+			}
+			.time-num{
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				min-width: 42rpx;
+				padding: 0 6rpx;
+				height: 36rpx;
+				border-radius: 6rpx;
+				box-sizing: border-box;
+			}
+		}
+		.style-2{
+			.content{
+				white-space: nowrap;
+			}
+			.item-bg{
+				background: linear-gradient( 140deg, #FF7A41, #FF2E0A);
+			}
+			.time-num{
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				min-width: 42rpx;
+				padding: 0 6rpx;
+				height: 36rpx;
+				border-radius: 6rpx;
+				box-sizing: border-box;
+			}
+		}
+		.style-3{
+			.content{
+				white-space: nowrap;
+			}
+			.time-num{
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				min-width: 42rpx;
+				padding: 0 6rpx;
+				height: 36rpx;
+				border-radius: 6rpx;
+				box-sizing: border-box;
+			}
+		}
+		.style-4{
+			background-size: 100% 110rpx !important;
+			.content{
+				white-space: nowrap;
+			}
+			.time-wrap{
+				margin-right: -14rpx;
+				.time-num{
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					min-width: 32rpx;
+					height: 36rpx;
+					border-radius: 6rpx;
+					font-size: 26rpx;
+					box-sizing: border-box;
+				}
+			}
+			.item-bg{
+				background: linear-gradient(#FFFFFF 60%, #f7f7f7 100%);
+			}
+			.btn-bg{
+				background: linear-gradient( 140deg, #FE2B2B 0%, #FF7236 100%);
+				border-radius: 50%;
+				border-bottom-left-radius: 0;
+				font-size: 30rpx;
+				color: #fff;
+				width: 50rpx;
+				height: 50rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.content-sign{
+				position: absolute;
+				left: 0;
+				top: 20rpx;
+				z-index: 1;
+				background: linear-gradient( 140deg, #FE2B2B 0%, #FF7236 100%);
+				padding: 6rpx 8rpx;
+			}
+		}
+	}
+</style>
diff --git a/src/addon/shop/components/diy/shop-order-info/index.vue b/src/addon/shop/components/diy/shop-order-info/index.vue
new file mode 100644
index 0000000..7f54164
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-order-info/index.vue
@@ -0,0 +1,156 @@
+<template>
+	<view :style="warpCss">
+		<view class="diy-text relative">
+			<view class="px-[var(--pad-sidebar-m)] pt-[var(--pad-top-m)] pb-[40rpx] flex items-center justify-between">
+				<view @click="diyStore.toRedirect(diyComponent.link)">
+					<view class="max-w-[200rpx] truncate leading-[1] text-[30rpx]" :style="{ fontSize: diyComponent.fontSize * 2 + 'rpx', color: diyComponent.textColor, fontWeight: (diyComponent.fontWeight == 'normal' ? 500 : diyComponent.fontWeight) }">
+						{{ diyComponent.text }}
+					</view>
+				</view>
+				<view class="flex items-center">
+					<view  @click="redirect({ url: '/addon/shop/pages/order/list'})" class="flex items-center">
+						<text class="max-w-[200rpx] truncate text-[24rpx]" :style="{ color: diyComponent.more.color }">{{ diyComponent.more.text }}</text>
+						<text class="nc-iconfont nc-icon-youV6xx text-[24rpx]" :style="{ color: diyComponent.more.color }"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="pb-[var(--pad-top-m)] px-[var(--pad-sidebar-m)] flex items-center justify-between text-center">
+			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(1)">
+				<view class="relative w-[44rpx] h-[44rpx]">
+					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order1.png')" />
+					<view v-if="orderInfo.wait_pay"
+						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_pay > 9 ? 'px-[10rpx]' : '']">
+						{{ orderInfo.wait_pay > 99 ? "99+" : orderInfo.wait_pay }}
+					</view>
+				</view>
+				<view class="mt-[20rpx] leading-[1]" :style="{
+					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
+					color: diyComponent.item.color,
+					fontWeight: diyComponent.item.fontWeight
+				}">待付款</view>
+			</view>
+			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(2)">
+				<view class="relative w-[44rpx] h-[44rpx]">
+					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order2.png')" />
+					<view v-if="orderInfo.wait_shipping"
+						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_shipping > 9 ? 'px-[10rpx]' : '']">
+						{{ orderInfo.wait_shipping > 99 ? "99+" : orderInfo.wait_shipping }}
+					</view>
+				</view>
+				<view class="mt-[20rpx] leading-[1]" :style="{
+					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
+					color: diyComponent.item.color,
+					fontWeight: diyComponent.item.fontWeight
+				}">待发货</view>
+			</view>
+			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(3)">
+				<view class="relative w-[44rpx] h-[44rpx]">
+					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order3.png')" />
+					<view v-if="orderInfo.wait_take"
+						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_take > 9 ? 'px-[10rpx]' : '']">
+						{{ orderInfo.wait_take > 99 ? "99+" : orderInfo.wait_take }}
+					</view>
+				</view>
+				<view class="mt-[20rpx] leading-[1]" :style="{
+					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
+					color: diyComponent.item.color,
+					fontWeight: diyComponent.item.fontWeight
+				}">待收货</view>
+			</view>
+			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(5)">
+				<view class="relative w-[44rpx] h-[44rpx]">
+					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order4.png')" />
+					<view v-if="orderInfo.evaluate"
+						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.evaluate > 9 ? 'px-[10rpx]' : '']">
+						{{ orderInfo.evaluate > 99 ? "99+" : orderInfo.evaluate }}
+					</view>
+				</view>
+				<view class="mt-[20rpx] leading-[1]" :style="{
+					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
+					color: diyComponent.item.color,
+					fontWeight: diyComponent.item.fontWeight
+				}">待评价</view>
+			</view>
+			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="redirect({ url: '/addon/shop/pages/refund/list'})">
+				<view class="relative w-[44rpx] h-[44rpx]">
+					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/shop/diy/member/order5.png')" />
+					<view v-if="orderInfo.refund"
+						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.refund > 9 ? 'px-[10rpx]' : '']">
+						{{ orderInfo.refund > 99 ? "99+" : orderInfo.refund }}
+					</view>
+				</view>
+				<view class="mt-[20rpx] leading-[1]" :style="{
+					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
+					color: diyComponent.item.color,
+					fontWeight: diyComponent.item.fontWeight
+				}">售后/退款</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, computed, watch,onMounted } from 'vue';
+	import useDiyStore from '@/app/stores/diy';
+	import { img,redirect } from '@/utils/common';
+	import {getShopOrderNum} from '@/addon/shop/api/order';
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
+	const diyStore = useDiyStore();
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	onMounted(() => {
+		refresh();
+	});
+
+	watch(
+	    () => diyComponent.value,
+		(newValue, oldValue) => {
+            refresh();
+    },{deep: true})
+
+	const refresh = () => {
+		// 装修模式
+		if (diyStore.mode == 'decorate') {
+			orderInfo.value = {
+	        }
+		} else {
+			getShopOrderNumFn()
+		}
+	}
+
+	const orderInfo = ref({})
+	const warpCss = computed(() => {
+		var style = '';
+	    style += 'position:relative;';
+	    if(diyComponent.value.componentStartBgColor) {
+	        if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+	        else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+	    }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+	const getShopOrderNumFn=()=>{
+		getShopOrderNum().then((res:any)=>{
+			orderInfo.value = res.data
+		})
+	}
+	const toList = (status:any) => {
+		redirect({ url: '/addon/shop/pages/order/list', param: { status } })
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/addon/shop/components/diy/shop-search/index.vue b/src/addon/shop/components/diy/shop-search/index.vue
new file mode 100644
index 0000000..c582cb6
--- /dev/null
+++ b/src/addon/shop/components/diy/shop-search/index.vue
@@ -0,0 +1,109 @@
+<template>
+	<view :style="warpCss">
+		<view :style="maskLayer"></view>
+		<view class="diy-shop-search relative overflow-hidden flex items-center">
+			<image :src="img('addon/shop/diy/search_01.png')" class="w-[40rpx] h-[40rpx]" mode="widthFix" @click="toLink('/addon/shop/pages/goods/category')"></image>
+			<view class="flex-1 ml-[24rpx] rounded-[32rpx] flex items-center bg-[var(--temp-bg)] opacity-90 py-[10rpx] pl-[38rpx] pr-[32rpx] justify-between h-[60rpx] box-border" @click="toLink('/addon/shop/pages/goods/search')">
+				<text class="text-[var(--text-color-light9)] text-[26rpx]">{{ diyComponent.text }}</text>
+				<text class="nc-iconfont nc-icon-sousuo-duanV6xx1 text-[24rpx]"></text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	// 搜索
+    import { ref,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
+	import { img, redirect } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
+	const diyStore = useDiyStore();
+
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	const warpCss = computed(() => {
+		var style = '';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+
+        if(diyComponent.value.componentBgUrl) {
+            style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
+            style += 'background-size: cover;background-repeat: no-repeat;';
+        }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+    // 背景图加遮罩层
+    const maskLayer = computed(()=>{
+        var style = '';
+        if(diyComponent.value.componentBgUrl) {
+            style += 'position:absolute;top:0;width:100%;';
+            style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
+            style += `height:${height.value}px;`;
+
+            if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+            if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+            if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+            if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+        }
+
+        return style;
+    });
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+    onMounted(() => {
+        refresh();
+        // 装修模式下刷新
+        if (diyStore.mode == 'decorate') {
+            watch(
+                () => diyComponent.value,
+                (newValue, oldValue) => {
+                    if (newValue && newValue.componentName == 'ShopSearch') {
+                        refresh();
+                    }
+                }
+            )
+        }
+    });
+
+    const instance = getCurrentInstance();
+    const height = ref(0)
+
+    const refresh = ()=> {
+        nextTick(() => {
+            const query = uni.createSelectorQuery().in(instance);
+            query.select('.diy-shop-search').boundingClientRect((data: any) => {
+                height.value = data.height;
+            }).exec();
+        })
+    }
+
+	const toLink = (url: any)=>{
+		if (diyStore.mode == 'decorate') return false;
+		redirect({ url })
+	}
+
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/addon/shop/components/diy/single-recommend/index.vue b/src/addon/shop/components/diy/single-recommend/index.vue
new file mode 100644
index 0000000..45c6b14
--- /dev/null
+++ b/src/addon/shop/components/diy/single-recommend/index.vue
@@ -0,0 +1,262 @@
+<template>
+	<view :style="warpCss" class="overflow-hidden" v-if="goodsList && goodsList[0]">
+		<view class="flex justify-between items-center mb-[20rpx]" v-if="diyComponent.textImg || diyComponent.subTitle.text">
+			<view class="h-[34rpx] flex items-center" v-if="diyComponent.textImg" @click="diyStore.toRedirect(diyComponent.textLink)">
+				<image class="h-[100%] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix" />
+			</view>
+			<view class="flex items-center ml-[auto]" v-if="diyComponent.subTitle.text" @click="diyStore.toRedirect(diyComponent.subTitle.link)" :style="{'color': diyComponent.subTitle.textColor}">
+				<text class="text-[24rpx]">{{diyComponent.subTitle.text}}</text>
+				<text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
+			</view>
+		</view>
+
+		<view class="flex justify-between">
+			<!-- 轮播图 -->
+			<view class="relative w-[340rpx] overflow-hidden" :style="carouselCss">
+				<view v-if="diyComponent.list.length == 1" class="leading-0 overflow-hidden">
+					<view @click="diyStore.toRedirect(diyComponent.list[0].link)">
+						<image v-if="diyComponent.list[0].imageUrl" :src="img(diyComponent.list[0].imageUrl)" mode="heightFix" class="h-[504rpx] !w-full" :show-menu-by-longpress="true"/>
+						<image v-else :src="img('static/resource/images/diy/figure.png')" mode="heightFix" class="h-[504rpx] !w-full" :show-menu-by-longpress="true"/>
+					</view>
+				</view>
+				<block v-else>
+					<swiper class="swiper ns-indicator-dots-three h-[504rpx]" autoplay="true" circular="true" :indicator-dots="isShowDots" @change="swiperChange"
+					:indicator-color="diyComponent.indicatorColor" :indicator-active-color="diyComponent.indicatorActiveColor">
+						<swiper-item class="swiper-item" v-for="(item) in diyComponent.list" :key="item.id">
+							<view @click="diyStore.toRedirect(item.link)">
+								<view class="item h-[504rpx]">
+									<image v-if="item.imageUrl" :src="img(item.imageUrl)" mode="scaleToFill" class="w-full h-full" :show-menu-by-longpress="true"/>
+									<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" class="w-full h-full" :show-menu-by-longpress="true"/>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+					<!-- #ifdef MP-WEIXIN -->
+					<view v-if="diyComponent.list.length > 1" class="swiper-dot-box straightLineStyle2">
+						<view v-for="(numItem, numIndex) in diyComponent.list" :key="numIndex" :class="['swiper-dot', { active: numIndex == swiperIndex }]" :style="[numIndex == swiperIndex ? { backgroundColor: diyComponent.indicatorActiveColor } : { backgroundColor: diyComponent.indicatorColor }]"></view>
+					</view>
+					<!-- #endif -->
+				</block>
+			</view>
+
+			<view class="w-[340rpx] h-[504rpx] flex flex-col bg-[#fff] box-border overflow-hidden" :style="goodsTempCss" @click="toLink(goodsList[0])">
+				<view :style="goodsImgCss" class="w-[346rpx] h-[350rpx] overflow-hidden">
+					<u--image width="346rpx" height="350rpx" :src="img(goodsList[0].goods_cover_thumb_mid || '')" model="aspectFill">
+						<template #error>
+							<image class="w-[346rpx] h-[350rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+						</template>
+					</u--image>
+				</view>
+				<view class="px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
+					<view class="text-[#303133] leading-[40rpx] text-[28rpx] truncate" :style="{ color : diyComponent.goodsNameStyle.color, fontWeight : diyComponent.goodsNameStyle.fontWeight }">
+						{{goodsList[0].goods_name}}
+					</view>
+					<view class="flex justify-between flex-wrap items-baseline mt-[28rpx]" >
+						<view class="flex items-center">
+							<view class="text-[var(--price-text-color)] price-font truncate max-w-[200rpx]" :style="{ color : diyComponent.priceStyle.mainColor }">
+								<text class="text-[24rpx] font-400">￥</text>
+								<text class="text-[40rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(goodsList[0])).toFixed(2).split('.')[0] }}</text>
+								<text class="text-[24rpx] font-500">.{{ parseFloat(diyGoods.goodsPrice(goodsList[0])).toFixed(2).split('.')[1] }}</text>
+							</view>
+							<image v-if="diyGoods.priceType(goodsList[0]) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+						</view>
+
+						<view class="w-[44rpx] h-[44rpx] bg-[red] flex items-center justify-center rounded-[50%]" :style="{ backgroundColor : diyComponent.saleStyle.color }">
+							<text class="iconfont iconjia  font-500 text-[32rpx] text-[#fff]"></text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	// 精选推荐
+    import { ref,reactive,computed, watch, onMounted } from 'vue';
+	import { redirect, img } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+	import { getGoodsComponents } from '@/addon/shop/api/goods';
+	import {useGoods} from '@/addon/shop/hooks/useGoods'
+
+	const diyGoods = useGoods();
+	const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
+	const diyStore = useDiyStore();
+
+	const goodsList = ref<Array<any>>([]);
+
+	const diyComponent = computed(() => {
+        if(props.value) {
+            return props.value;
+        }else if (diyStore.mode == 'decorate') {
+			return diyStore.value[props.index];
+		} else {
+			return props.component;
+		}
+	})
+
+	// 轮播指示器
+	let isShowDots = ref(true)
+	// #ifdef H5
+	isShowDots.value = true;
+	// #endif
+
+	// #ifdef MP-WEIXIN
+	isShowDots.value = false;
+	// #endif
+
+	const warpCss = computed(() => {
+		var style = '';
+        style += 'position:relative;';
+        if(diyComponent.value.componentStartBgColor) {
+            if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+            else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
+        }
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+    const goodsTempCss = computed(() => {
+        var style = '';
+        if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
+        if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
+
+		if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2);'
+		else style += 'width: calc((100vw - 20rpx) / 2 );'
+        return style;
+    })
+
+	const goodsImgCss = computed(() => {
+	    var style = '';
+	    if (diyComponent.value.topElementRounded) style += 'border-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
+	    return style;
+	})
+
+	const carouselCss = computed(() => {
+	    var style = '';
+	    if (diyComponent.value.topCarouselRounded) style += 'border-top-left-radius:' + diyComponent.value.topCarouselRounded * 2 + 'rpx;';
+	    if (diyComponent.value.topCarouselRounded) style += 'border-top-right-radius:' + diyComponent.value.topCarouselRounded * 2 + 'rpx;';
+	    if (diyComponent.value.bottomCarouselRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomCarouselRounded * 2 + 'rpx;';
+	    if (diyComponent.value.bottomCarouselRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomCarouselRounded * 2 + 'rpx;';
+
+		if(diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 20rpx) / 2);'
+		else style += 'width: calc((100vw - 20rpx) / 2 );'
+	    return style;
+	})
+
+	watch(
+		() => props.pullDownRefreshCount,
+		(newValue, oldValue) => {
+			// 处理下拉刷新业务
+		}
+	)
+
+	const getGoodsListFn = () => {
+        let data = {
+            num: 1,
+            goods_ids: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : ''
+        }
+        getGoodsComponents(data).then((res) => {
+            goodsList.value = res.data;
+        });
+    }
+
+	onMounted(() => {
+		refresh();
+        // 装修模式下刷新
+        if (diyStore.mode != 'decorate') {
+            watch(
+                () => diyComponent.value,
+                (newValue, oldValue) => {
+                    refresh();
+                },
+                {deep: true}
+            )
+        }
+	});
+
+	const refresh = () => {
+		// 装修模式下设置默认图
+		if (diyStore.mode == 'decorate') {
+			let obj = {
+				goods_cover_thumb_mid: "",
+				goods_name: "商品名称",
+				sale_num: "100",
+				unit: "件",
+				goodsSku:{price:100}
+			};
+			goodsList.value.push(obj);
+		}else{
+			getGoodsListFn();
+		}
+	}
+
+	const toLink = (data: any) => {
+		redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
+	}
+
+	const swiperIndex = ref(0);
+	const swiperChange = e => {
+	    swiperIndex.value = e.detail.current;
+	};
+</script>
+
+<style lang="scss" scoped>
+.swiper.ns-indicator-dots-three :deep(.uni-swiper-dots-horizontal) {
+	bottom: 12rpx;
+}
+.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot) {
+	width: 8rpx;
+	height: 8rpx;
+	border-radius: 8rpx;
+	margin-right: 14rpx;
+}
+.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot):last-of-type {
+	margin-right: 0;
+}
+.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot-active) {
+	width: 30rpx;
+}
+
+.swiper-dot-box {
+	position: absolute;
+	bottom: 4rpx;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 80rpx 8rpx;
+	box-sizing: border-box;
+
+	.swiper-dot {
+		background-color: #b2b2b2;
+		width: 10rpx;
+		border-radius: 50%;
+		height: 10rpx;
+		margin: 8rpx;
+	}
+
+	&.straightLineStyle2{
+		.swiper-dot {
+			width: 8rpx;
+			height: 8rpx;
+			border-radius: 8rpx;
+			margin: 0;
+			margin-right: 14rpx;
+			&.last-of-type {
+				margin-right: 0;
+			}
+			&.active {
+				width: 30rpx;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue b/src/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue
new file mode 100644
index 0000000..8f0cf8b
--- /dev/null
+++ b/src/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue
@@ -0,0 +1,141 @@
+<template>
+	<!-- 满减 -->
+	<view @touchmove.prevent.stop>
+		<u-popup class="manjian-popup" :show="manjianShow" @close="manjianShow = false" zIndex="999999">
+			<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
+				<view class="title !pb-[30rpx]">满减送</view>
+				<scroll-view class="h-[520rpx]" scroll-y="true">
+					<view class="px-[var(--popup-sidebar-m)] pt-[30rpx]">
+						<view v-for="(item,index) in data.content" :key="index" class="mb-[40rpx]">
+							<view class="flex items-center">
+								<text class="nc-iconfont nc-icon-qianbaoyueV6xx !text-[28rpx] mr-[10rpx]"></text>
+								<text class="text-[26rpx] font-500">{{item.limit}}</text>
+							</view>
+							<view class="mt-[20rpx]">
+								<view v-if="item.goods && item.goods.length" class="flex mt-[20rpx]">
+									<view class="w-[100rpx] flex justify-end">
+										<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">赠品</view>
+									</view>
+									<view class="flex-1 ml-[8rpx]">
+										<view class="flex p-[20rpx] bg-[#f8f8f8] rounded-[var(--goods-rounded-big)] overflow-hidden" :class="{'mb-[20rpx]': goodsIndex != (item.goods.length-1)}" v-for="(goodsItem,goodsIndex) in item.goods" :key="goodsIndex" @click="goodsEvent(goodsItem.goods_id)">
+											<u--image radius="var(--goods-rounded-mid)" width="120rpx" height="120rpx" :src="img(goodsItem.sku_image)" model="aspectFill">
+												<template #error>
+													<image class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+												</template>
+											</u--image>
+											<view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] pt-[6rpx] pb-[10rpx]">
+												<view class="truncate text-[#303133] text-[24rpx] leading-[32rpx]">
+													{{goodsItem.goods_name}}
+												</view>
+												<view class="flex items-baseline">
+													<view v-if="goodsItem.sku_name" class="truncate text-[22rpx] mt-[4rpx] text-[#999]">
+														{{ goodsItem.sku_name }}
+													</view>
+													<view class="font-400 ml-[auto] text-[24rpx] text-[#303133]">
+														<text>x</text>
+														<text>{{goodsItem.num}}</text>
+													</view>
+												</view>
+											</view>
+										</view>
+									</view>
+								</view>
+								<block v-if="item.give && item.give.length">
+									<view class="flex items-center mt-[24rpx]" v-for="(giveItem,giveIndex) in item.give" :key="giveIndex">
+										<view class="w-[100rpx] flex justify-end">
+											<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">{{giveItem.label}}</view>
+										</view>
+										<text class="text-[24rpx]">{{giveItem.content}}</text>
+									</view>
+								</block>
+								<view class="flex items-baseline mt-[24rpx]" v-if="item.coupon && item.coupon.length">
+									<view class="w-[100rpx] flex justify-end">
+										<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">优惠券</view>
+									</view>
+									<view class="flex flex-wrap flex-1">
+										<text class="flex items-center text-[24rpx] leading-[1.3]" :class="{'mb-[16rpx]': couponIndex != (item.coupon.length-1)}" v-for="(couponItem,couponIndex) in item.coupon" :key="couponIndex">
+											{{couponItem.num}}张{{couponItem.coupon_name}}优惠券
+										</text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<view class="btn-wrap">
+					<button class="primary-btn-bg btn" @click="manjianShow = false">确定</button>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue';
+	import { img, deepClone, getToken, redirect } from '@/utils/common'
+	import { cloneDeep } from 'lodash-es'
+	import { t } from '@/locale'
+
+	const manjianShow = ref(false);
+	const data = ref({});
+	const open = (parameter:any = {})=>{
+		data.value = cloneDeep(parameter);
+		data.value.content = [];
+		data.value.rule_json.forEach((item,index)=>{
+			if(item.is_show || item.is_show == undefined){
+				let obj = {};
+				obj.limit = `门槛满${data.value.condition_type == 'over_n_yuan' ? parseFloat(item.limit).toFixed(2) : item.limit }${data.value.condition_type == 'over_n_yuan' ? '元' : '件'}`;
+				if(item.is_give_goods){
+					obj.goods = deepClone(item.goods);
+				}
+				obj.give = [];
+				if(item.is_discount && item.discount_money){
+					obj.give.push({
+						label: '满减',
+						content: `订单金额${item.discount_type == 1 ? '减' : '打'}${item.discount_type == 1 ? parseFloat(item.discount_money).toFixed(2) : item.discount_money}${item.discount_type == 1 ? '元' : '折'}`
+					})
+				}
+				if(item.is_free_shipping){
+					obj.give.push({
+						label: '包邮',
+						content: '商品包邮'
+					});
+				}
+				if(item.is_give_point && item.point){
+					obj.give.push({
+						label: '积分',
+						content: `送${item.point}积分`
+					});
+				}
+				if(item.is_give_balance && item.balance){
+					obj.give.push({
+						label: '余额',
+						content: `送${parseFloat(item.balance).toFixed(2)}余额`
+					});
+				}
+				if(item.is_give_coupon){obj.coupon = item.coupon;}
+				data.value.content.push(obj);
+			}
+		});
+		manjianShow.value = true;
+	}
+	
+	const goodsEvent = (id : number) => {
+		redirect({
+			url: '/addon/shop/pages/goods/detail',
+			param: {
+				goods_id: id
+			}
+		})
+	}
+	
+	defineExpose({
+		open
+	})
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .manjian-popup .u-slide-up-enter-to{
+		z-index: 999999 !important;
+	}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue b/src/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue
new file mode 100644
index 0000000..da496cb
--- /dev/null
+++ b/src/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue
@@ -0,0 +1,67 @@
+<template>
+    <view class="goods-recommend">
+        <view class="mt-[60rpx] flex flex-col items-center sidebar-margin pb-[30rpx]">
+            <view class="flex items-center mb-[30rpx]" v-if="goodsList && Object.keys(goodsList).length">
+                <image class="w-[38rpx] h-[22rpx]" :src="img('addon/shop_fenxiao/level/title_left.png')" mode="aspectFill"></image>
+                <text class="text-[30rpx] mx-[18rpx] font-500 text-[#EF000C]">猜你喜欢</text>
+                <image class="w-[38rpx] h-[22rpx]" :src="img('addon/shop_fenxiao/level/title_right.png')" mode="aspectFill"></image>
+            </view>
+            <diy-goods-list @loadingFn="getGoodsListFn" :component="goodsData"/>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { img } from '@/utils/common';
+import { ref } from 'vue'
+import diyGoodsList from '@/addon/shop/components/diy/goods-list/index.vue';
+// 获取分销商品数据
+const goodsList = ref()
+const getGoodsListFn = (data: any)=>{
+    goodsList.value = data || {}
+}
+// 商品列表组件
+const goodsData = ref({
+    style: 'style-2',
+    num: 10,
+    source: 'all',
+    topElementRounded: 12,
+    bottomElementRounded: 12,
+    margin: {
+        both: 10,
+        bottom: 0,
+        top: 0
+    },
+    priceStyle: {
+        mainColor: "#ff4142",
+        control: true
+    },
+    goodsNameStyle:{
+        color: "#303133",
+        control: true,
+        fontWeight: "normal"
+    },
+    saleStyle: {
+        color: "#999",
+        control: true
+    },
+    labelStyle: {
+        isShow: true,
+        control: true
+    },
+    btnStyle: {
+        fontWeight:false,
+        padding: 0,
+        aroundRadius:25,
+        textColor: "#fff",
+        startBgColor: '#ff4142',
+        endBgColor: '#ff4142',
+        style: 'nc-icon-gouwuche1',
+        control: true
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/components/ns-goods-sku/ns-goods-sku.vue b/src/addon/shop/components/ns-goods-sku/ns-goods-sku.vue
new file mode 100644
index 0000000..a12cf9b
--- /dev/null
+++ b/src/addon/shop/components/ns-goods-sku/ns-goods-sku.vue
@@ -0,0 +1,450 @@
+<template>
+	<view @touchmove.prevent.stop>
+		<u-overlay :show="goodsSkuPop" @click="closeFn" zIndex="490">
+			<u-popup class="popup-type" :show="goodsSkuPop" @close="closeFn" mode="bottom" :overlay="false" zIndex="500">
+				<view class="py-[32rpx] relative" v-if="goodsDetail.detail" @touchmove.prevent.stop>
+					<view class="flex px-[32rpx]" :class="{'mb-[58rpx]':!(goodsDetail.is_newcomer && goodsDetail.newcomer_price != goodsDetail.price && (Object.keys(cartSkuList).length?parseInt(cartSkuList.num)+buyNum:buyNum)>1)}">
+
+						<view class="rounded-[var(--goods-rounded-big)] overflow-hidden w-[180rpx] h-[180rpx]">
+							<u--image width="180rpx" height="180rpx" :src="img(goodsDetail.detail.sku_image)" @click="imgListPreview(goodsDetail.detail.sku_image)" model="aspectFill">
+								<template #error>
+									<image class="w-[180rpx] h-[180rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+								</template>
+							</u--image>
+						</view>
+						<view class="flex flex-1 flex-col justify-between ml-[24rpx] py-[10rpx]">
+							<view class="w-[100%]">
+								<view class="text-[var(--price-text-color)] flex items-baseline">
+									<text class="text-[32rpx] font-bold price-font">￥</text>
+									<text class="text-[48rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
+									<text class="text-[32rpx] mr-[6rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
+									<image class="h-[24rpx] ml-[6rpx] max-w-[60rpx]" v-if="priceType() == 'newcomer_price'" :src="img('addon/shop/newcomer.png')" mode="heightFix" />
+									<image class="h-[24rpx] ml-[6rpx] max-w-[44rpx]" v-if="priceType() == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+									<image class="h-[24rpx] ml-[6rpx] max-w-[72rpx]" v-if="priceType() == 'discount_price'" :src="img('addon/shop/discount.png')" mode="heightFix" />
+								</view>
+								 <view class="text-[26rpx] leading-[32rpx] text-[var(--text-color-light6)] mt-[12rpx]">库存{{goodsDetail.detail.stock}}{{ goodsDetail.goods.unit }}</view>
+							</view>
+							<view class="text-[26rpx] leading-[30rpx] text-[var(--text-color-light6)] w-[100%] max-h-[60rpx] multi-hidden" v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length">已选规格：{{goodsDetail.detail.sku_spec_format}}</view>
+	<!-- 						<view v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length">
+								<text>已选规格：{{goodsDetail.detail.sku_spec_format}}</text>
+							</view> -->
+						</view>
+					</view>
+					<view class="flex items-center px-[32rpx] pt-[8rpx] pb-[16rpx] h-[58rpx] box-border" v-if="goodsDetail.is_newcomer && goodsDetail.newcomer_price != goodsDetail.price && (Object.keys(cartSkuList).length?parseInt(cartSkuList.num)+buyNum:buyNum)>1">
+						<image class="h-[24rpx] w-[56rpx]" :src="img('addon/shop/newcomer.png')" mode="aspectFit" />
+						<view class="text-[24rpx] text-[#FFB000] leading-[34rpx] ml-[8rpx]">第1{{goodsDetail.goods.unit}}，￥{{parseFloat(goodsDetail.newcomer_price).toFixed(2)}}/{{goodsDetail.goods.unit}}；第{{(parseInt(cartSkuList.num||0)+buyNum)>2?'2~'+(parseInt(cartSkuList.num||0)+buyNum):'2'}}{{goodsDetail.goods.unit}}，￥{{parseFloat(parseFloat(goodsPrice)).toFixed(2)}}/{{goodsDetail.goods.unit}}</view>
+					</view>
+					<scroll-view class="h-[500rpx] px-[32rpx] box-border mb-[60rpx]" scroll-y="true">
+						<view :class="{'mt-[20rpx]': 0 != index }" v-for="(item,index) in goodsDetail.goodsSpec" :key="index">
+							<view class="text-[28rpx] leading-[36rpx] mb-[24rpx]">{{item.spec_name}}</view>
+							<view class="flex flex-wrap">
+								<view class="box-border bg-[var(--temp-bg)] text-[24rpx] px-[44rpx] text-center h-[56rpx] flex-center mr-[20rpx] mb-[20rpx] border-1 border-solid rounded-[50rpx] border-[var(--temp-bg)]"
+								 :class="{'!border-[var(--primary-color)] text-[var(--primary-color)] !bg-[var(--primary-color-light)]': subItem.selected}"
+								v-for="(subItem,subIndex) in item.values" :key="subIndex" @click="change(subItem, index)">
+									{{subItem.name}}
+								</view>
+							</view>
+						</view>
+						<view class="flex justify-between items-center mt-[20rpx]">
+							<view class="text-[28rpx]">购买数量</view>
+							<text v-if="maxBuyShow > 0 && minBuyShow > 1" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">
+								({{ minBuyShow }}{{ goodsDetail.goods.unit }}起售，限购{{ maxBuyShow }}{{ goodsDetail.goods.unit }})
+							</text>
+							<text v-else-if="maxBuyShow > 0" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">(限购{{ maxBuyShow }}{{ goodsDetail.goods.unit }})</text>
+							<text v-else-if="minBuyShow > 1" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">({{ minBuyShow }}{{ goodsDetail.goods.unit }}起售)</text>
+
+							<u-number-box :min="minBuy" :max="maxBuy" integer :step="1" input-width="68rpx" v-model="buyNum" input-height="52rpx">
+								<template #minus>
+									<view class="relative w-[30rpx] h-[30rpx]" @click="reduceNumChange">
+										<text class="text-[30rpx] nc-iconfont nc-icon-jianV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum <= minBuy }"></text>
+									</view>
+								</template>
+								<template #input>
+									<input class="text-[#303133] text-[28rpx] mx-[10rpx] w-[80rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]" type="number" @input="goodsSkuInputFn" @blur="goodsSkuBlurFn" v-model="buyNum"  />
+								</template>
+								<template #plus>
+									<view class="relative w-[30rpx] h-[30rpx]" @click="addNumChange">
+										<text class="text-[30rpx] nc-iconfont nc-icon-jiahaoV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum >= maxBuy }"></text>
+									</view>
+								</template>
+							</u-number-box>
+						</view>
+					</scroll-view>
+					<view class="px-[20rpx]">
+
+						<!-- #ifdef H5 -->
+						<button v-if="goodsDetail.detail.stock > 0" hover-class="none" class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 rounded-[50rpx] primary-btn-bg" type="primary" @click="confirm">确定</button>
+						<!-- #endif -->
+
+						<!-- #ifdef MP-WEIXIN -->
+						<template v-if="goodsDetail.detail.stock > 0">
+							<button v-if="isBindMobile && userInfo && !userInfo.mobile" hover-class="none" class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 rounded-[50rpx] primary-btn-bg" type="primary" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">确定</button>
+							<button v-else hover-class="none" class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 rounded-[50rpx] primary-btn-bg" type="primary" @click="confirm">确定</button>
+						</template>
+						<!-- #endif -->
+
+						<button hover-class="none" v-else class="!h-[80rpx] leading-[80rpx] text-[26rpx] font-500 text-[#fff] bg-[#ccc] rounded-[50rpx]">已售罄</button>
+					</view>
+				</view>
+			</u-popup>
+		</u-overlay>
+		 <!-- 强制绑定手机号 -->
+		<bind-mobile ref="bindMobileRef" />
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, computed, toRaw } from 'vue';
+	import { img, redirect, getToken } from '@/utils/common'
+	import useCartStore from '@/addon/shop/stores/cart'
+	import { useLogin } from '@/hooks/useLogin'
+	import useMemberStore from '@/stores/member'
+	import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
+	import { cloneDeep } from 'lodash-es'
+	import { t } from '@/locale'
+
+	const props = defineProps(['goodsDetail']);
+	const goodsSkuPop = ref(false);
+	const callback:any = ref(null);
+	const currSpec = ref({
+		skuId: "",
+		name: []
+	})
+	const openType = ref("");
+	const buyNum = ref(1)
+
+	const maxBuy = ref(0); // 限购
+	const minBuy = ref(0); // 起售
+	const maxBuyShow = ref(0); // 限购
+	const minBuyShow = ref(0); // 起售
+
+	// 商品价格
+	const goodsPrice = computed(() => {
+        let price = "0.00";
+        if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'newcomer_discount' && goodsDetail.value.is_newcomer && goodsDetail.value.newcomer_price != goodsDetail.value.price && (Object.keys(cartSkuList.value).length ? parseInt(cartSkuList.value.num) + buyNum.value : buyNum.value) < 2) {
+            // 新人价
+            price = goodsDetail.value.newcomer_price;
+        } else if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'discount' && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.is_discount && goodsDetail.value.sale_price != goodsDetail.value.price) {
+            price = goodsDetail.value.sale_price // 折扣价
+        } else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
+            price = goodsDetail.value.member_price // 会员价
+        } else {
+            price = goodsDetail.value.price
+        }
+        return price;
+    })
+
+	// 价格类型
+	const priceType = () => {
+	    let type = "";
+	    if (goodsDetail.value.type == 'newcomer_discount' && Object.keys(goodsDetail.value).length && goodsDetail.value.is_newcomer && goodsDetail.value.newcomer_price != goodsDetail.value.price && getToken()) {
+	        type = 'newcomer_price'// 新人
+	    } else if (goodsDetail.value.type == 'discount' && Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.is_discount && goodsDetail.value.sale_price != goodsDetail.value.price) {
+	        type = 'discount_price'// 折扣
+	    } else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
+	        type = 'member_price' // 会员价
+	    }
+	    return type;
+	}
+
+	// 会员信息
+	const memberStore = useMemberStore()
+	const userInfo = computed(() => memberStore.info)
+
+	// 购物车数量
+	const cartStore = useCartStore();
+	cartStore.getList();
+	const cartSkuList = computed(()=>{
+		if(goodsDetail.value && cartStore.cartList['goods_' + goodsDetail.value.goods_id] && cartStore.cartList['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id]) {
+			return cartStore.cartList['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id];
+		}else{
+			return {}
+		}
+	})
+	const cartList = computed(() => cartStore.cartList)
+	const open = (type="",fn = "")=>{
+		openType.value = type;
+		goodsSkuPop.value = true;
+		callback.value = fn;
+	}
+
+	const goodsSkuInputFn = ()=>{
+		setTimeout(() => {
+			if(!buyNum.value || buyNum.value <= minBuy.value ){
+				buyNum.value = minBuy.value || 1;
+			}
+			if(buyNum.value >= maxBuy.value){
+				buyNum.value = maxBuy.value;
+			}
+			// 起售大于库存，初始值也应该是零
+			if(minBuy.value > goodsDetail.value.detail.stock){
+				buyNum.value = 0;
+			}
+		},0)
+	}
+	const goodsSkuBlurFn = ()=>{
+		setTimeout(() => {
+			if(!buyNum.value || buyNum.value <= minBuy.value ){
+				buyNum.value = minBuy.value || 1;
+			}
+			if(buyNum.value >= maxBuy.value){
+				buyNum.value = maxBuy.value;
+			}
+
+			// 起售大于库存，初始值也应该是零
+			if(minBuy.value > goodsDetail.value.detail.stock){
+				buyNum.value = 0;
+				uni.showToast({
+				    title: '商品库存小于起购数量',
+				    icon: 'none'
+				});
+			}
+		},0)
+	}
+
+	const closeFn = ()=>{
+		goodsSkuPop.value = false
+	}
+
+	const goodsDetail = computed(() => {
+		let data = cloneDeep(props.goodsDetail);
+
+		// 重组数据结构
+		if(Object.keys(data).length){
+
+			if(!Object.keys(currSpec.value.name).length) currSpec.value.name = data.sku_spec_format.split(",");
+
+			data.goodsSpec.forEach((item: any,index: any)=>{
+				let specName = item.spec_values.split(",");
+				item.values = [];
+				specName.forEach((specItem: any, specIndex: any)=>{
+					item.values[specIndex] = {};
+					item.values[specIndex].name = specItem;
+					item.values[specIndex].selected = false;
+					item.values[specIndex].disabled = false;
+
+					// 选中规格
+					currSpec.value.name.forEach((currSpecItem, currSpecIndex)=>{
+						if(currSpecIndex == index && currSpecItem == specItem){
+							item.values[specIndex].selected = true;
+						}
+					})
+				})
+			})
+			getSkuId();
+
+			// 当前详情内容
+			if(data.skuList && Object.keys(data.skuList).length){
+				data.skuList.forEach((idItem: any, idIndex: any)=>{
+					if(idItem.sku_id == currSpec.value.skuId){
+						data.detail = idItem;
+					}
+				})
+			}
+		}
+
+		// 限购 - 是否开启限购
+		if(data.goods.is_limit){
+			if(data.goods.max_buy){
+				let max_buy = 0;
+				if(data.goods.limit_type == 1){ //单次限购
+					max_buy = data.goods.max_buy;
+				}else{ // 单人限购
+					let buyVal = data.goods.max_buy - (data.goods.has_buy||0);
+					max_buy = buyVal > 0 ? buyVal : 0;
+				}
+				if(max_buy > data.detail.stock){
+					maxBuy.value = data.detail.stock
+				}else if(max_buy <= data.detail.stock){
+					maxBuy.value = max_buy;
+				}
+
+				// 限购开启且最大购买变为零时，初始值也应该是零
+				if(maxBuy.value == 0){
+					buyNum.value = 0;
+				}
+			}
+			// 仅用于展示
+			maxBuyShow.value = data.goods.max_buy; // 限购
+		}else{
+			maxBuy.value = data.detail.stock;
+		}
+
+		// 起售
+		minBuy.value = data.goods.min_buy > 0 ? data.goods.min_buy : 1;
+		// 起售大于库存，初始值也应该是零
+		if(minBuy.value > data.detail.stock){
+			buyNum.value = 0;
+		}else{
+			buyNum.value = minBuy.value;
+		}
+		// 仅用于展示
+		minBuyShow.value = data.goods.min_buy;
+		return data;
+	})
+
+	const change = (data: any, index: any)=>{
+		currSpec.value.name[index] = data.name;
+		getSkuId(); // 刷新当前规格信息
+	}
+
+	const emits = defineEmits(['change'])
+	const getSkuId = ()=>{
+		props.goodsDetail.skuList.forEach((skuItem: any, skuIndex: any)=>{
+			if(skuItem.sku_spec_format == currSpec.value.name.toString()){
+				currSpec.value.skuId = skuItem.sku_id
+				emits('change',skuItem.sku_id)
+			}
+		})
+	}
+
+	const addNumChange = () => {
+		if(minBuy.value && minBuy.value > goodsDetail.value.detail.stock){
+			uni.showToast({ title: '商品库存小于起购数量', icon: 'none' })
+			return;
+		}
+		if(goodsDetail.value.goods.is_limit){
+			let tips = `该商品单次限购${goodsDetail.value.goods.max_buy}件`;
+			if(goodsDetail.value.goods.limit_type != 1){ //单次限购
+				tips = `该商品每人限购${goodsDetail.value.goods.max_buy}件`;
+				if(goodsDetail.value.goods.max_buy - maxBuy.value){
+					tips += `,已购${goodsDetail.value.goods.max_buy - maxBuy.value}件`;
+				}
+			}
+			if(buyNum.value >= maxBuy.value){
+				uni.showToast({ title: tips, icon: 'none' })
+			}
+		}
+	}
+
+	const reduceNumChange = () => {
+		if(minBuy.value > 1){
+			let tips = `该商品起购${minBuy.value}件`;
+			if(buyNum.value <= minBuy.value){
+				uni.showToast({ title: tips, icon: 'none' })
+			}
+		}
+	}
+
+	//强制绑定手机号
+	const bindMobileRef: any = ref(null)
+	const isBindMobile = ref(uni.getStorageSync('isbindmobile'))
+
+	//提交
+	const confirm = ()=> {
+		if(buyNum.value < 1) return;
+
+        // 检测是否登录
+        if (!userInfo.value) {
+	        useLogin().setLoginBack({
+		        url: '/addon/shop/pages/goods/detail',
+		        param: {
+			        sku_id: goodsDetail.value.sku_id,
+			        type: goodsDetail.value.type
+		        }
+	        })
+	        return false
+        }
+
+        // #ifdef H5
+        // 绑定手机号
+        if (uni.getStorageSync('isbindmobile')) {
+            bindMobileRef.value.open()
+            return false
+        }
+        // #endif
+
+        // 加入购物车
+        if (openType.value == 'join_cart') {
+            let num = 0;
+			let limitNum = 0;
+            let cartId = "";
+
+            if (cartList.value['goods_' + goodsDetail.value.goods_id] && cartList.value['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id]) {
+                num = toRaw(cartList.value['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id].num);
+                cartId = toRaw(cartList.value['goods_' + goodsDetail.value.goods_id]['sku_' + goodsDetail.value.sku_id].id)
+            }
+			if (cartList.value['goods_' + goodsDetail.value.goods_id] && cartList.value['goods_' + goodsDetail.value.goods_id]) {
+			    limitNum = toRaw(cartList.value['goods_' + goodsDetail.value.goods_id].totalNum);
+			}
+
+            num += Number(buyNum.value);
+			limitNum += Number(buyNum.value);
+			/************** 限购-start **************/
+			if(goodsDetail.value.goods.is_limit){
+				let tips = `该商品单次限购${goodsDetail.value.goods.max_buy}件`;
+				if(goodsDetail.value.goods.limit_type != 1){ //单次限购
+					tips = `该商品每人限购${goodsDetail.value.goods.max_buy}件`;
+					if(goodsDetail.value.goods.max_buy - maxBuy.value){
+						tips += `,已购${goodsDetail.value.goods.max_buy - maxBuy.value}件`;
+					}
+				}
+				if(limitNum > maxBuy.value){
+					uni.showToast({ title: tips, icon: 'none' })
+					return false;
+				}
+			}
+			/************** 限购-end **************/
+            cartStore.increase({
+                id: cartId || '',
+                goods_id: goodsDetail.value.goods_id,
+                sku_id: goodsDetail.value.sku_id,
+                stock: goodsDetail.value.stock,
+                sale_price: goodsDetail.value.sale_price,
+                num: num
+            }, 0, () => {
+                uni.showToast({
+                    title: '加入购物车成功',
+                    icon: 'none'
+                });
+            });
+
+        } else if (openType.value == 'buy_now') {
+            // 立即购买
+            var data = {
+                sku_id: goodsDetail.value.sku_id,
+                num: buyNum.value
+            };
+
+            uni.setStorage({
+                key: 'orderCreateData',
+                data: {
+	                sku_data: [
+		                data
+	                ],
+	                extend_data: {
+		                relate_id: '',
+		                activity_type: goodsDetail.value.type // 目前营销活动有，新人价、限时折扣
+	                }
+                },
+                success: () => {
+                    redirect({ url: '/addon/shop/pages/order/payment' })
+                }
+            });
+        }
+
+        closeFn();
+    }
+
+	//预览图片
+	const imgListPreview = (item: any) => {
+		if (item === '') return false
+		var urlList = []
+		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+		uni.previewImage({
+			indicator: "number",
+			loop: true,
+			urls: urlList
+		})
+	}
+	defineExpose({
+		open
+	})
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .u-number-box .u-number-box__slot{
+		display: flex;
+		align-items: center;
+	}
+</style>
diff --git a/src/addon/shop/hooks/useGoods.ts b/src/addon/shop/hooks/useGoods.ts
new file mode 100644
index 0000000..e08bc60
--- /dev/null
+++ b/src/addon/shop/hooks/useGoods.ts
@@ -0,0 +1,50 @@
+import { redirect, img, getToken } from '@/utils/common';
+export function useGoods(params: any = {}) {
+
+    const baseTagStyle = (data:any)=>{
+    	let style = "";
+    	if(data.color_json.text_color){
+    		style += `color:${data.color_json.text_color};`;
+    	}
+    	if(data.color_json.border_color){
+    		style += `border-color: ${data.color_json.border_color};`;
+    	}
+    	if(data.color_json.bg_color){
+    		style += `background-color: ${data.color_json.bg_color};`;
+    	}
+    	return style;
+    }
+	
+	// 价格类型
+	const priceType = (data:any) =>{
+		let type = "";
+	    if(data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
+	        type = 'member_price' // 会员价
+	    }
+		return type;
+	}
+	
+	// 商品价格
+	const goodsPrice = (data:any) => {
+	    let price = "0.00";
+	    if (data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
+	        price = data.goodsSku.member_price ? data.goodsSku.member_price : data.goodsSku.price // 会员价
+	    } else {
+	        price = data.goodsSku ? data.goodsSku.price : data.price; //兼容商品推荐组件
+	    }
+	    return parseFloat(price);
+	}
+	
+	
+	// 错误图片展示
+	const errorImgFn = (data: any, type: any) =>{
+		data[type] = '';
+	}
+
+    return {
+        baseTagStyle: baseTagStyle,
+		goodsPrice: goodsPrice,
+		priceType: priceType,
+		error: errorImgFn
+    }
+}
diff --git a/src/addon/shop/hooks/useGoodsLimit.ts b/src/addon/shop/hooks/useGoodsLimit.ts
new file mode 100644
index 0000000..da8852d
--- /dev/null
+++ b/src/addon/shop/hooks/useGoodsLimit.ts
@@ -0,0 +1,78 @@
+import { redirect, img, getToken } from '@/utils/common';
+import { ref, reactive, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+
+/********************商品限购和商品起售********************/
+export function useGoodsLimit() {
+	
+	/**
+	 * 获取商品数量
+	 * params 商品库存(stock)，是否开启限购（is_limit），限购类型（limit_type），限购数量（max_buy），起购（min_buy），已购买数量（has_buy） 
+	 * return 商品数量，是否可以购买，原因
+	***/
+	const getGoodsNum = (params: any = {})=>{
+		let {stock,is_limit,limit_type,max_buy,min_buy,has_buy,num} = params;
+		
+		let temp_range = {
+			'up':{  num: 0, tips: '', is_stock: false }, // 上限
+			'off':{ num: 0, tips: ''}  // 下限
+		};
+		
+		let returnObj = {
+			num: 0,
+			max_num: 0,
+			is_buy: true,
+			tips: ''
+		}
+		
+		/******************* 起售-start ************************/ 
+		temp_range.off.num = min_buy > 0 ? min_buy : 1;
+		if(min_buy){
+			temp_range.off.tips = `该商品起购${params.min_buy}件`;
+		}
+		/******************* 起售-end ************************/ 
+		
+		
+		/******************* 限购-start ************************/ 
+		if(is_limit){
+			returnObj.is_buy = true;
+			if(max_buy){
+				if(limit_type == 1){ //单次限购
+					temp_range.up.num = max_buy;
+					temp_range.up.tips = `该商品单次限购${max_buy}件`;
+				}else{ // 单人限购
+					let buyVal = params.max_buy - (params.has_buy||0);
+					temp_range.up.num = buyVal > 0 ? buyVal : 0;
+					temp_range.up.tips = `该商品单次限购${max_buy}件`;
+					if(has_buy > 0){
+						temp_range.up.tips += `,已购${has_buy}件`;
+					}
+				}
+			
+				if(temp_range.up.num > params.stock){
+					temp_range.up.num = params.stock;
+					temp_range.up.is_stock = true;
+					temp_range.up.tips = "商品库存不足";
+				}
+			}
+		}else{
+			returnObj.is_buy = true;
+			temp_range.up.num = stock;
+			temp_range.up.tips = "商品库存不足";
+		}
+		/******************* 限购-end ************************/ 
+		if(temp_range.off.num > temp_range.up.num && temp_range.up.is_stock){
+			temp_range.up.tips = "商品库存不足";
+		}else if(temp_range.off.num > temp_range.up.num){
+			returnObj.num = temp_range.up.num;
+		}else{
+			if(num <= temp_range.off.num){
+				returnObj.tips = temp_range.off.tips;
+			}
+		}
+		return returnObj;
+	}
+
+    return {
+		getGoodsNum
+    }
+}
diff --git a/src/addon/shop/locale/en.json b/src/addon/shop/locale/en.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/src/addon/shop/locale/en.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/addon/shop/locale/zh-Hans.json b/src/addon/shop/locale/zh-Hans.json
new file mode 100644
index 0000000..afa55ea
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans.json
@@ -0,0 +1,32 @@
+{
+    "pages.goods.search": "搜索",
+    "pages.goods.cart": "购物车",
+    "pages.goods.collect": "商品收藏",
+    "pages.goods.browse": "我的足迹",
+    "pages.goods.category": "商品分类",
+    "pages.goods.detail": "商品详情",
+    "pages.goods.list": "商品列表",
+    "pages.goods.rank": "排行榜",
+    "pages.member.index": "个人中心",
+    "pages.member.my_coupon": "我的优惠券",
+    "pages.order.list": "订单列表",
+    "pages.order.detail": "订单详情",
+    "pages.order.payment": "待付款订单",
+    "pages.evaluate.order_evaluate": "商品评价",
+    "pages.evaluate.order_evaluate_view": "商品评价",
+    "pages.evaluate.list": "评价列表",
+    "pages.coupon.list": "优惠券列表",
+    "pages.coupon.detail": "优惠券详情",
+    "pages.discount.list": "限时折扣",
+    "pages.refund.list": "退款列表",
+    "pages.refund.detail": "退款详情",
+    "pages.refund.apply": "申请退款",
+    "pages.refund.edit_apply": "编辑退款信息",
+    "pages.refund.log": "协商记录",
+    "pages.point.index": "积分商城",
+    "pages.point.list": "积分商品列表",
+    "pages.point.detail": "积分商品详情",
+    "pages.point.payment": "待付款订单",
+    "pages.point.order_list": "积分兑换记录",
+    "pages.newcomer.list": "新人专享列表"
+}
\ No newline at end of file
diff --git a/src/addon/shop/locale/zh-Hans/common.json b/src/addon/shop/locale/zh-Hans/common.json
new file mode 100644
index 0000000..abfbb1b
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/common.json
@@ -0,0 +1,7 @@
+{
+    "orderNo": "订单号",
+    "actualPayment": "实付款",
+    "orderClose": "关闭订单",
+    "orderFinish": "确认收货",
+    "coupon":"优惠劵"
+}
\ No newline at end of file
diff --git a/src/addon/shop/locale/zh-Hans/pages.goods.cart.json b/src/addon/shop/locale/zh-Hans/pages.goods.cart.json
new file mode 100644
index 0000000..2c63c08
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.goods.cart.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.goods.category.json b/src/addon/shop/locale/zh-Hans/pages.goods.category.json
new file mode 100644
index 0000000..2c63c08
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.goods.category.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.goods.detail.json b/src/addon/shop/locale/zh-Hans/pages.goods.detail.json
new file mode 100644
index 0000000..2c63c08
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.goods.detail.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.goods.list.json b/src/addon/shop/locale/zh-Hans/pages.goods.list.json
new file mode 100644
index 0000000..358a66b
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.goods.list.json
@@ -0,0 +1,4 @@
+{
+    "all": "全部",
+    "price": "价格"
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.goods.rank.json b/src/addon/shop/locale/zh-Hans/pages.goods.rank.json
new file mode 100644
index 0000000..b6f022f
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.goods.rank.json
@@ -0,0 +1,3 @@
+{
+	"rankingRules":"榜单规则"
+}
\ No newline at end of file
diff --git a/src/addon/shop/locale/zh-Hans/pages.index.json b/src/addon/shop/locale/zh-Hans/pages.index.json
new file mode 100644
index 0000000..2c63c08
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.index.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.member.index.json b/src/addon/shop/locale/zh-Hans/pages.member.index.json
new file mode 100644
index 0000000..c8b96b1
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.member.index.json
@@ -0,0 +1,3 @@
+{
+  "coupon": "优惠券"
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.order.detail.json b/src/addon/shop/locale/zh-Hans/pages.order.detail.json
new file mode 100644
index 0000000..54f9825
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.order.detail.json
@@ -0,0 +1,24 @@
+{
+	"orderNo": "订单号",
+	"actualPayment": "实付款",
+	"orderClose": "关闭订单",
+	"orderFinish": "确认收货",
+	"topay": "去支付",
+	"orderDetail": "详情",
+	"orderTradeNo": "支付流水号",
+	"createTime": "创建时间",
+	"deliveryType": "配送方式",
+	"payTypeName": "支付方式",
+	"payTime": "支付时间",
+	"goodsMoney": "商品金额",
+	"deliveryMoney": "配送费用",
+	"orderMoney": "实付金额",
+	"evaluate": "评价",
+	"selectedEvaluate": "查看评价",
+	"index": "首页",
+	"discountMoney": "优惠金额",
+	"logisticsTracking":"查看物流",
+	"copy":"复制",
+	"detailedInformation":"详细信息",
+	"helpPay":"的帮付"
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.order.list.json b/src/addon/shop/locale/zh-Hans/pages.order.list.json
new file mode 100644
index 0000000..937a509
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.order.list.json
@@ -0,0 +1,16 @@
+{
+	"emptyAddress":"暂无收货地址，请先创建地址",
+	"addAddress":"新增收货地址",
+	"selectAddress":"选择地址",
+	"evaluate": "评价",
+	"money":"元",
+	"pendingPayment":"待支付",
+	"pendingPaymentTips":"剩余时间",
+	"service":"含物流运输服务",
+	"selectedEvaluate": "查看评价",
+	"orderClose": "关闭订单",
+	"orderFinish": "确认收货",
+	"topay": "支付",
+	"deliveryType":"配送方式",
+	"createTime":"下单时间"
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.order.payment.json b/src/addon/shop/locale/zh-Hans/pages.order.payment.json
new file mode 100644
index 0000000..5ba0797
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.order.payment.json
@@ -0,0 +1,11 @@
+{
+    "orderNo": "订单号",
+    "actualPayment": "实付款",
+    "orderClose": "关闭订单",
+    "orderFinish": "确认收货",
+    "topay": "支付",
+    "orderDetail": "详情",
+	"evaluate": "评价",
+    "orderListempty":"暂无订单",
+	"emptyAddress":"暂无收货地址，请先创建地址"
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.point.detail.json b/src/addon/shop/locale/zh-Hans/pages.point.detail.json
new file mode 100644
index 0000000..e30ee61
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.point.detail.json
@@ -0,0 +1,5 @@
+{
+	"point":"积分",
+	"priceUnit":"元",
+	"redeemed":"已兑"
+}
\ No newline at end of file
diff --git a/src/addon/shop/locale/zh-Hans/pages.point.order_list.json b/src/addon/shop/locale/zh-Hans/pages.point.order_list.json
new file mode 100644
index 0000000..31342de
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.point.order_list.json
@@ -0,0 +1,14 @@
+{
+  "orderNo": "订单号",
+  "actualPayment": "订单金额",
+  "orderClose": "关闭订单",
+  "orderFinish": "确认收货",
+  "topay": "支付",
+  "orderDetail": "详情",
+  "evaluate": "评价",
+  "selectedEvaluate": "查看评价",
+  "orderListempty": "暂无订单",
+  "deliveryType":"配送方式",
+  "money":"元",
+  "point": "积分"
+}
diff --git a/src/addon/shop/locale/zh-Hans/pages.refund.detail.json b/src/addon/shop/locale/zh-Hans/pages.refund.detail.json
new file mode 100644
index 0000000..648c3b4
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.refund.detail.json
@@ -0,0 +1,17 @@
+{
+	"refundDetail":"退货详情",
+	"fastRefundSuccessful":"极速退款成功",
+	"refundInfo":"由于你的信誉良好,已享受极速退款服务,退款即刻到账",
+	"refundType": "退款方式",
+	"refundMoney": "退款金额",
+	"refundCause": "退款原因",
+	"reasonRefusal": "拒绝原因",
+	"refundNo": "退款编号",
+	"createTime": "申请时间",
+	"createExplain": "退款说明",
+	"record": "协商记录",
+	"check": "查看",
+	"refundApply":"取消退款",
+	"cancelRefundContent": "撤销之后本次申请将会关闭,如后续仍有问题可再次发起申请。",
+	"index": "首页"
+}
\ No newline at end of file
diff --git a/src/addon/shop/locale/zh-Hans/pages.refund.list.json b/src/addon/shop/locale/zh-Hans/pages.refund.list.json
new file mode 100644
index 0000000..25a4e87
--- /dev/null
+++ b/src/addon/shop/locale/zh-Hans/pages.refund.list.json
@@ -0,0 +1,6 @@
+{
+	"refundMoney":"退款金额",
+	"refundApply":"取消退款",
+	"refund":"退款进度",
+	"cancelRefundContent": "撤销之后本次申请将会关闭,如后续仍有问题可再次发起申请。"
+}
\ No newline at end of file
diff --git a/src/addon/shop/pages/coupon/detail.vue b/src/addon/shop/pages/coupon/detail.vue
new file mode 100644
index 0000000..8ec4842
--- /dev/null
+++ b/src/addon/shop/pages/coupon/detail.vue
@@ -0,0 +1,174 @@
+<template>
+	<view :style="themeColor()">
+		<view v-if="Object.keys(detail).length&&!loading" class="overflow-hidden min-h-screen bg-style relative" :style="{ 'background': 'url(' + img('addon/shop/coupon/coupon_bg.png') + ') no-repeat' }">
+			<!-- #ifdef MP -->
+			<top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
+			<!-- #endif -->
+			<view class="relative mt-[236rpx] w-[100%] h-[932rpx]" :style="{ 'background': 'url(' + img('addon/shop/coupon/coupon_bg_02.png') + ') center / contain no-repeat' }">
+				<view v-if="detail.limit_count"
+				      :style="{ 'background': 'url(' + img('addon/shop/coupon/top_tab.png') + ') center / cover no-repeat', 'transform': 'translateX(-50%)'}"
+				      class="text-[32rpx] leading-[56rpx] top-[2rpx] left-[50%] px-[30rpx] box-border justify-center absolute min-w-[196rpx] h-[56rpx] flex items-center text-[#FFF9DD]">
+					限领{{ detail.limit_count }}张
+				</view>
+				<view class="flex justify-center pt-[90rpx]">
+					<text class="max-w-[380rpx] text-[var(--price-text-color)] text-[140rpx] truncate price-font">{{ detail.coupon_price || 0.00 }}</text>
+					<text class="flex items-center justify-center text-[44rpx] mt-[54rpx] ml-[8rpx] text-[#F7D894] bg-[var(--price-text-color)] rounded-full w-[70rpx] h-[70rpx]">元</text>
+				</view>
+				<view class="h-[64rpx] leading-[64rpx] text-[42rpx] text-[#E22D17] mt-[10rpx] text-center">
+					<text v-if="detail.min_condition_money === '0.00'">无门槛</text>
+					<text v-else>满{{ detail.coupon_min_price }}元可用</text>
+				</view>
+				<view class="text-[26rpx] h-[36rpx] text-[#E22D17] mt-[44rpx] text-center flex justify-center items-center">
+					<block v-if="detail.valid_type == 1">
+						<text>领取之日起</text>
+						<text>{{ detail.length}}</text>
+						<text>天内有效</text>
+					</block>
+					<block v-else>
+						<text>有效期至</text>
+						<text>{{ detail.valid_end_time ? detail.valid_end_time.slice(0, 10) : '' }}</text>
+					</block>
+				</view>
+				<view class="flex justify-center items-center mt-[20rpx]">
+					<text v-if="detail.btnType === 'collected'"
+					      class="!leading-[100rpx] text-center text-[rgba(255,255,255,1)] text-[46rpx] min-w-[240rpx] h-[106rpx]"
+					      :style="{ 'background': 'url(' + img('addon/shop/coupon/coupon_btn_02.png') + ')  center / contain no-repeat' }"
+					>已领完
+					</text>
+					<text v-if="detail.btnType === 'collecting'"
+					      class="!leading-[100rpx] text-center text-[#E22D17] text-[46rpx] min-w-[240rpx] h-[106rpx]"
+					      :style="{ 'background': 'url(' + img('addon/shop/coupon/coupon_btn.png') + ') center / contain no-repeat' }"
+					      @click="collecting(detail.id)">领取
+					</text>
+					<text v-if="detail.btnType === 'using'"
+					      class="!leading-[100rpx] text-center text-[#E22D17] text-[46rpx] min-w-[240rpx] h-[106rpx]"
+					      :style="{ 'background': 'url(' + img('addon/shop/coupon/coupon_btn.png') + ') center / contain no-repeat' }"
+					      @click="toLink(detail.id)">去使用
+					</text>
+				</view>
+				<view class="w-[230rpx] h-[230rpx] box-border p-[15rpx] bg-[#fff] mx-[auto] mt-[50rpx]">
+					<image class="w-[200rpx] h-[200rpx]" :src="codeUrl" mode="aspectFill" />
+				</view>
+				<view class="text-[24rpx] text-[rgba(255,255,255,0.7)] mt-[30rpx] text-center">注:扫描二维码或点击右上角进行分享</view>
+			</view>
+
+		</view>
+		<loading-page :loading="loading"></loading-page>
+	</view>
+</template>
+<script lang="ts" setup>
+    import { ref, computed } from 'vue'
+    import { onLoad } from '@dcloudio/uni-app'
+    import { img, redirect, handleOnloadParams, goback } from '@/utils/common'
+    import QRCode from "qrcode";
+    import { topTabar } from '@/utils/topTabbar'
+    import { getShopCouponInfo, getCoupon, getShopCouponQrocde } from '@/addon/shop/api/coupon'
+    import useMemberStore from '@/stores/member'
+    import { useLogin } from '@/hooks/useLogin'
+
+    const loading = ref(false)
+    const codeUrl = ref('')
+    const detail: any = ref({})
+    const memberStore = useMemberStore()
+    const userInfo = computed(() => memberStore.info)
+
+    /********* 自定义头部 - start ***********/
+    const topTabarObj = topTabar()
+    let topTabbarData = topTabarObj.setTopTabbarParam({title:'优惠券详情'})
+    /********* 自定义头部 - end ***********/
+
+    onLoad((option: any) => {
+
+        // #ifdef MP-WEIXIN
+        // 处理小程序场景值参数
+        option = handleOnloadParams(option);
+        // #endif
+
+        if (!option.coupon_id) {
+            let parameter = {
+				url:'/addon/shop/pages/coupon/list',
+				title: '优惠券不存在'
+			};
+			goback(parameter)
+        } else {
+            getShopCouponInfoFn(option.coupon_id)
+            getShopCouponQrocdeFn(option.coupon_id)
+        }
+    })
+
+    const getShopCouponInfoFn = (id: number) => {
+        loading.value = true
+        getShopCouponInfo(id).then((res: any) => {
+            detail.value = res.data
+            if (detail.value.sum_count != -1 && detail.value.receive_count === detail.value.sum_count) {
+                detail.value.btnType = 'collected'//已领完
+            }else if (!userInfo.value) {
+                detail.value.btnType = 'collecting'//领用
+            } else {
+                if (detail.value.is_receive && detail.value.limit_count === detail.value.member_receive_count) {
+                    detail.value.btnType = 'using'//去使用
+                } else {
+                    detail.value.btnType = 'collecting'//领用
+                }
+            }
+            loading.value = false
+
+        }).catch(() => {
+            loading.value = false
+            detail.value = {}
+            setTimeout(() => {
+                redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })
+            }, 600)
+        })
+    }
+
+    const getShopCouponQrocdeFn = (id: any) => {
+        // #ifdef H5
+        QRCode.toDataURL(window.location.href, { errorCorrectionLevel: 'L', margin: 0, width: 100 }).then(url => {
+            codeUrl.value = url
+        });
+        // #endif
+
+        // #ifdef MP-WEIXIN
+        getShopCouponQrocde(id).then((res: any) => {
+            if (res.data) {
+                codeUrl.value = img(res.data);
+            }
+        })
+        // #endif
+    }
+
+    const collecting = (coupon_id: any) => {
+        if (!userInfo.value) {
+            useLogin().setLoginBack({ url: '/addon/shop/pages/coupon/list' })
+            return false
+        }
+        getCoupon({ coupon_id, number: 1 }).then(res => {
+            detail.value.btnType = 'using'
+        })
+    }
+    const toLink = (coupon_id: any) => {
+        redirect({ url: '/addon/shop/pages/goods/list', param: { coupon_id } })
+    }
+</script>
+<style lang="scss" scoped>
+	.border-color {
+		border-color: var(--primary-color) !important;
+	}
+
+	.text-color {
+		color: var(--primary-color) !important;
+	}
+
+	.bg-color {
+		background-color: var(--primary-color) !important;
+	}
+
+	.bg-style {
+		background-size: 100% 100% !important;
+	}
+
+	.code {
+		box-shadow: 0 0 20px -1px;
+	}
+</style>
diff --git a/src/addon/shop/pages/coupon/list.vue b/src/addon/shop/pages/coupon/list.vue
new file mode 100644
index 0000000..37f43c1
--- /dev/null
+++ b/src/addon/shop/pages/coupon/list.vue
@@ -0,0 +1,339 @@
+<template>
+	<view class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden" :style="themeColor()">
+		<view class="coupon-header fixed  left-0 right-0 top-0 z-10080">
+			<!-- #ifdef MP-WEIXIN -->
+			<view :style="{height: headStyle, backgroundImage: 'url(' + img('addon/shop/coupon/coupon_uniapp.png') + ')',backgroundSize: '100%', backgroundPosition: 'bottom', backgroundRepeat: 'no-repeat'}">
+				<top-tabbar :data="param" class="top-header"/>
+			</view>
+			<!-- #endif -->
+			<!-- #ifdef H5 -->
+			<view class="h-[364rpx]" :style="{ backgroundImage: 'url(' + img('addon/shop/coupon/coupon_uniapp.png') + ')',backgroundSize: 'cover', backgroundPosition: 'bottom',backgroundRepeat: 'no-repeat'}"></view>
+			<!-- #endif -->
+			<view class="-mt-[-36rpx] px-[var(--sidebar-m)] py-[24rpx] flex items-center justify-between leading-[40rpx] text-[28rpx] bg-[var(--page-bg-color)] rounded-t-[26rpx] relative z-99999 !pl-[30rpx]" :class="{'!bg-[#fff]': typePopup}">
+				<text :class="{ 'text-primary font-500': searchType == 'all' }" @click="searchTypeFn('all')">默认排序</text>
+				<view class="flex items-center" :class="{ 'text-primary font-500': searchType == 'create_time' }" @click="searchTypeFn('create_time')">
+					<text class="mr-[4rpx]">最新</text>
+					<text v-if="create_time == 'asc'" class="text-[18rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangshangV6xx1" :class="{ '!text-primary': searchType == 'create_time' }"></text>
+					<text  v-else class="text-[18rpx] text-[var(--text-color-light6)]  nc-iconfont nc-icon-a-xiangxiaV6xx1" :class="{ '!text-primary': searchType == 'create_time' }"></text>
+				</view>
+				<view class="flex items-center" :class="{ 'text-primary font-500': searchType == 'price' }" @click="searchTypeFn('price')">
+					<text class="mr-[4rpx]">价格</text>
+					<text v-if="price == 'asc'" class="text-[18rpx]  text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangshangV6xx1" :class="{ '!text-primary': searchType == 'price' }"></text>
+					<text  v-else class="text-[18rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangxiaV6xx1" :class="{ '!text-primary': searchType == 'price' }"></text>
+				</view>
+				<view class="flex items-center" :class="{'text-primary font-500': searchType == 'type' }" @click="searchTypeFn('type')">
+					<view class="w-[2rpx] h-[28rpx] bg-gradient-to-b from-[#333] to-[#fff] mr-[20rpx] flex-shrink-0"></view>
+					<text class="mr-[10rpx]">筛选</text>
+					 <text class="nc-iconfont color-[var(--text-color-light6)] nc-icon-shaixuanV6xx text-[28rpx]"></text>
+				</view>
+			</view>
+		</view>
+		<mescroll-body ref="mescrollRef"  @init="mescrollInit" :down="{ use: false }"  height="auto" @up="getShopCouponListFn" :top="mescrollTop">
+			<view v-if="list.length" class="pb-[var(--top-m)] sidebar-margin">
+				<template v-for="(item, index) in list">
+					<view v-if="item.btnType === 'collected'"
+							class="flex items-center relative w-[100%] rounded-[var(--rounded-big)] overflow-hidden bg-[#fff] py-[20rpx] background-size"
+							:class="{'mt-[var(--top-m)]':index}" :style="{ backgroundImage: 'url(' + img('addon/shop/coupon/coupn_loot.png') + ')'}" @click="toDetail(item.id)" >
+						<view class="box-border flex-1 border-0 border-r-[1px] border-[#FFDCDC] border-dashed flex items-center">
+							<view class="w-[164rpx] box-border flex justify-center ">
+								<view class="flex items-baseline text-[var(--price-text-color)]">
+									<text class="text-[28rpx] leading-[34rpx] text-center font-400 price-font mr-[4rpx]">￥</text>
+									<text class="text-[54rpx] font-500 text-left leading-[70rpx] max-w-[136rpx] price-font">{{ item.coupon_price }}</text>
+								</view>
+							</view>
+							<view class="flex-1 box-border ml-[10rpx]">
+								<view class="text-[26rpx] leading-[42rpx] text-left font-500">
+									<text v-if="item.min_condition_money === '0.00'">无门槛</text>
+									<text v-else>满{{ item.coupon_min_price }}元可用</text>
+								</view>
+								<view class="mt-[10rpx] text-left flex items-center">
+									<text class="w-[80rpx] text-center bg-[#FFEFF0] whitespace-nowrap text-[var(--primary-color)] text-[18rpx] h-[30rpx] leading-[30rpx] rounded-[16rpx] mr-[10rpx] flex-shrink-0">{{ item.type_name }}</text>
+									<text class="text-[24rpx] truncate max-w-[190rpx] leading-[30rpx] text-[var(--text-color-light6)]">{{ item.title }}</text>
+								</view>
+								<view class="w-[100%] mt-[10rpx] text-[20rpx] leading-[30rpx] text-[var(--text-color-light6)]">
+									<text v-if="item.valid_type == 1">领取之日起{{ item.length || '' }}天内有效</text>
+									<text v-else> 有效期至{{ item.valid_end_time ? item.valid_end_time.slice(0, 10) : '' }}</text>
+								</view>
+							</view>
+						</view>
+						<view class="pr-[20rpx] pl-[34rpx]">
+							<button class="flex-center" :style="{width:'150rpx',height:'60rpx',color:'#fff', fontSize:'24rpx', padding:'0',backgroundColor:'#FFB4B1', border:'none' ,opacity :'1',borderRadius:'30rpx'}"  disabled>已领完</button>
+						</view>
+						<view class="absolute top-0 right-[190rpx]  h-[10rpx] w-[20rpx] rounded-br-[20rpx] rounded-bl-[20rpx] bg-[var(--page-bg-color)] "></view>
+						<view class="absolute bottom-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-tr-[20rpx] rounded-tl-[20rpx] bg-[var(--page-bg-color)]"></view>
+					</view>
+					<view v-else class="flex items-center relative w-[100%] rounded-[var(--rounded-big)] overflow-hidden bg-[#fff] py-[20rpx] background-size" :class="{'mt-[var(--top-m)]':index}" @click="toDetail(item.id)">
+						<view class="relative box-border flex-1 border-0 border-r-[1px] border-[#FFDCDC] border-dashed flex items-center pl-[10rpx]">
+							<view class="w-[164rpx] box-border flex justify-center">
+								<view class="flex items-baseline text-[var(--price-text-color)]">
+									<text class="text-[28rpx] leading-[34rpx] text-center font-400 price-font  mr-[4rpx]">￥</text>
+									<text class="text-[54rpx] font-500 text-left leading-[70rpx] max-w-[136rpx] price-font">{{ item.coupon_price }}</text>
+								</view>
+							</view>
+							<view class="flex-1 box-border ml-[10rpx]">
+								<view class="text-[26rpx] leading-[42rpx] text-left font-500">
+									<text v-if="item.min_condition_money === '0.00'">无门槛</text>
+									<text v-else>满{{ item.coupon_min_price }}元可用</text>
+								</view>
+								<view class="mt-[10rpx] text-left flex items-center">
+									<text class="w-[80rpx] bg-[#FFEFF0] whitespace-nowrap text-[var(--primary-color)] text-[18rpx] h-[30rpx] leading-[30rpx] text-center rounded-[16rpx] mr-[10rpx] flex-shrink-0">{{ item.type_name }}</text>
+									<text class="text-[24rpx] truncate max-w-[190rpx] leading-[30rpx] text-[var(--text-color-light9)]">{{ item.title }}</text>
+								</view>
+								<view class="w-[100%] mt-[6rpx] text-[20rpx] leading-[30rpx] text-[var(--text-color-light9)]">
+									<text v-if="item.valid_type == 1">领取之日起<text>{{ item.length || '' }}</text>天内有效</text>
+									<text v-else> 有效期至<text>{{ item.valid_end_time ? item.valid_end_time.slice(0, 10) : '' }}</text></text>
+								</view>
+							</view>
+						</view>
+						<view v-if="item.btnType === 'collecting'" @click.stop="collecting(item.id, index)" class="pr-[20rpx] pl-[34rpx]">
+							<button class="flex-center" :style="{width:'150rpx',height:'60rpx',color:'#fff', fontSize:'24rpx', padding:'0', backgroundColor:'var(--primary-color)',border:'none',borderRadius:'30rpx'}">立即领取</button>
+						</view>
+						<view v-if="item.btnType === 'using'" @click.stop="toLink(item.id)" class="pr-[20rpx] pl-[34rpx]">
+							<button class="flex-center" :style="{width:'150rpx',height:'60rpx',color:'var(--primary-color)', fontSize:'24rpx', padding:'0',backgroundColor:'transparent',border:'2rpx solid var(--primary-color)',borderRadius:'30rpx'}">去使用</button>
+						</view>
+						<view class="absolute top-0 right-[190rpx]  h-[10rpx] w-[20rpx] rounded-br-[20rpx] rounded-bl-[20rpx] bg-[var(--page-bg-color)] "></view>
+						<view class="absolute bottom-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-tr-[20rpx] rounded-tl-[20rpx] bg-[var(--page-bg-color)]"></view>
+					</view>
+				</template>
+				<!-- <view :style="{'height': nullPageHeight}" class="noData bg-[#fff] rounded-[var(--rounded-big)] flex items-center justify-center"> -->
+				<!-- </view> -->
+			</view>
+			<!-- <view class=""> -->
+				<mescroll-empty v-if="!list.length && !loading" :option="{tip : '暂无优惠券',btnText:'去逛逛'}" @emptyclick="redirect({ url: '/addon/shop/pages/goods/list' })"></mescroll-empty>
+			<!-- </view> -->
+		</mescroll-body>
+		
+		<u-popup :show="typePopup" mode="top" @close="typePopup = false"  :customStyle="{top:typePopupTopVal}" :safeAreaInsetBottom="false">
+			<view @touchmove.prevent.stop>
+				<scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="'id' + (subActive ? subActive - 1 : 0)"  class="px-[var(--sidebar-m)]  box-border bg-white rounded-b-[26rpx]">
+					<view class="items-center flex py-[20rpx]  border-0 border-t-[2rpx] border-solid border-[#F0F2F8]">
+						<text class="flex-shrink-0 w-[120rpx] h-[50rpx] text-[24rpx] leading-[50rpx] text-center text-[#333] bg-[var(--temp-bg)] rounded-[30rpx] border-box mr-[20rpx] border-[2rpx] border-solid border-[#F8F9FD]" :class="{'!text-primary !border-primary !bg-[rgba(239,0,12,0.04)] font-500':item.value == curType}"
+							v-for="(item,index) in typeList" :key="index" :id="'id' + index"
+								@click="typeClick(index,item.value)">{{item.label}}
+							</text>
+					</view>
+				</scroll-view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, getCurrentInstance } from 'vue'
+import { img, redirect, pxToRpx } from '@/utils/common'
+import { topTabar } from '@/utils/topTabbar'
+import { getShopCouponList, getCoupon, getMyCouponType } from '@/addon/shop/api/coupon'
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
+import {onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useMemberStore from '@/stores/member'
+import { useLogin } from '@/hooks/useLogin'
+import { t } from '@/locale'
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
+// 获取系统状态栏的高度
+let menuButtonInfo: any = {};
+// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+// #endif
+/********* 自定义头部 - start ***********/
+const topTabarObj = topTabar()
+let param = topTabarObj.setTopTabbarParam({title:'优惠券列表'})
+/********* 自定义头部 - end ***********/
+
+// 头部图片的高度
+const headStyle = computed(() => {
+	let style = (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) +  364) + 'rpx'
+	return style
+})
+
+const mescrollTop = computed(() => {
+	let style = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) +  416) + 'rpx' : '416rpx'
+	return style
+})
+
+const instance = getCurrentInstance();
+let typePopupTopVal = ref()
+const typePopupTopFn = () => {
+	nextTick(() => {
+		setTimeout(()=>{
+			const query = uni.createSelectorQuery().in(instance);
+			query.select('.coupon-header').boundingClientRect((data:any) => {
+				typePopupTopVal.value = data.height + 'px';
+			}).exec();
+		})
+	})
+}
+typePopupTopFn();
+
+// // 获取空页面高度
+// const nullPageHeight = computed(() => {
+// 	let hei = '';
+// 	// #ifndef  H5
+// 	// 屏幕高度 - 图片高度 - 上下padding + 内容框上移高度 - 苹果手机安全距离
+// 	hei = `calc(100vh - ${mescrollTop.value} - 40rpx)`
+// 	// #endif
+// 	// #ifdef H5
+// 	// 屏幕高度 - 图片高度 - 上下padding + 内容框上移高度 - 苹果手机安全距离
+// 	hei = `calc(100vh - 416rpx)`
+// 	// #endif
+// 	return hei
+// })
+
+const list: any = ref<Array<Object>>([]);
+const loading = ref<boolean>(true);
+const memberStore = useMemberStore()
+const userInfo = computed(() => memberStore.info)
+
+const getShopCouponListFn = (mescroll: any) => {
+	loading.value = true;
+	let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size,
+		order: searchType.value === 'all' ? '' : searchType.value,
+		sort: searchType.value == 'price' ? price.value : create_time.value,
+		type: curType.value || ''
+	};
+
+	getShopCouponList(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>).map((el: any) => {
+			if (el.sum_count != -1 && el.receive_count === el.sum_count) {
+				el.btnType = 'collected'//已领完
+			}else if (!userInfo.value) {
+				el.btnType = 'collecting'//领用
+			} else {
+				if (el.is_receive && el.limit_count === el.member_receive_count) {
+					el.btnType = 'using'//去使用
+				} else {
+					el.btnType = 'collecting'//领用
+				}
+			}
+			return el
+		})
+		//设置列表数据
+		if (mescroll.num == 1) {
+			list.value = []; //如果是第一页需手动制空列表
+		}
+		list.value = list.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+		loading.value = false;
+	}).catch(() => {
+		loading.value = false;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+const collecting = (coupon_id: any, index: number) => {
+	if (!userInfo.value) {
+		useLogin().setLoginBack({ url: '/addon/shop/pages/coupon/list' })
+		return false
+	}
+	getCoupon({ coupon_id, number: 1, type: 'receive' }).then((res: any) => {
+		if (res.code > 0) {
+			list.value[index].member_receive_count += 1
+			list.value[index].receive_count += 1
+			if (list.value[index].member_receive_count == list.value[index].limit_count
+					|| (list.value[index].sum_count != -1 && list.value[index].receive_count === list.value[index].sum_count)
+			) {
+				list.value[index].btnType = 'using'
+			}
+		}
+
+	})
+}
+
+const toDetail = (coupon_id: any) => {
+	redirect({ url: '/addon/shop/pages/coupon/detail', param: { coupon_id } })
+}
+const toLink = (coupon_id: any) => {
+	redirect({ url: '/addon/shop/pages/goods/list', param: { coupon_id } })
+}
+
+// 优惠劵
+const price = ref('');
+const create_time = ref('');
+const searchType = ref('all');
+// 类型
+const subActive = ref<number>(0)
+const curType = ref('')
+const typeList = ref<Array<Object>>([])
+const typePopup = ref<boolean>(false)
+const getMyCouponTypeFn = () =>{
+    getMyCouponType().then((res: any) =>{
+        const obj = { label: '全部', value: '' };
+        typeList.value.push(obj)
+		typeList.value = typeList.value.concat(res.data)
+    })
+}
+onLoad(()=>{
+    getMyCouponTypeFn()
+})
+
+const typeClick = (index : number,data:any) =>{
+    subActive.value = index
+    curType.value = data
+    list.value = []
+    getMescroll().resetUpScroll()
+	typePopup.value = false
+}
+// 筛选
+const searchTypeFn = (type: any) => {
+	searchType.value = type;
+	if ( type == 'all') {
+		create_time.value = '';
+		price.value = '';
+	}
+	if ( type == 'price') {
+		create_time.value = '';
+		if(price.value){
+			price.value = price.value == 'asc' ? 'desc' : 'asc';
+		}else{
+			price.value = 'asc';
+		}
+	}
+	if ( type == 'create_time') {
+		price.value = '';
+		if(create_time.value){
+			create_time.value = create_time.value == 'asc' ? 'desc' : 'asc';
+		}else{
+			create_time.value = 'asc';
+		}
+	}
+	if (type == 'type') {
+		create_time.value = 'asc';
+		price.value = 'asc';
+		typePopup.value = true;
+		
+	} else {
+		typePopup.value = false;
+		list.value = [];
+
+		getMescroll().resetUpScroll();
+	}
+}
+
+</script>
+
+<style lang="scss" scoped>
+	button{
+		box-sizing: border-box;
+		&::after {
+			display:none;
+		}
+	}
+.background-size{
+	background-repeat: no-repeat;
+	background-position: right top;
+	background-size: 27%;
+}
+
+:deep(.u-popup .u-popup__content){
+	border-bottom-left-radius:26rpx;
+	border-bottom-right-radius:26rpx;
+}
+:deep(.mescroll-empty){
+	margin-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/discount/list.vue b/src/addon/shop/pages/discount/list.vue
new file mode 100644
index 0000000..f4450b4
--- /dev/null
+++ b/src/addon/shop/pages/discount/list.vue
@@ -0,0 +1,281 @@
+<template>
+    <view class="discount bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
+        <view  class="fixed top-0 left-0 w-full z-10 text-[0]">
+			<!-- #ifdef MP-WEIXIN -->
+			<view class="absolute top-0 left-0 right-0 z-999">
+				<top-tabbar :data="param"  class="top-header"/>
+			</view>
+			<!-- #endif -->
+			<u-swiper v-if="bannerList.length" :list="imgList" :indicator="bannerList.length" :indicatorStyle="{'bottom': '60rpx',}" :autoplay="true" :height="headStyle"  @click="toRedirect"></u-swiper>
+			<image v-if="!bannerListLoading&&!bannerList.length" :src="img('addon/shop/discount/discount_banner.png')" mode="scaleToFill" class="w-full" :style="{height: headStyle}" :show-menu-by-longpress="true"/>
+			<view class="relative w-full h-[110rpx] mt-[-40rpx] z-5" v-if="discountList.length">
+                <view class="bg-[#f24f3d] w-[750rpx] rounded-tl-[24rpx] rounded-tr-[24rpx] h-[96rpx] absolute left-0 bottom-[1rpx]"></view>
+                <scroll-view :scroll-x="true" class="h-[110rpx] absolute left-0 bottom-0 z-5">
+                    <view class="flex items-end h-[100%]" :style="{'width':187.5*discountList.length+'rpx'}" >
+                        <view class="w-[187.5rpx] h-[100rpx] relative flex-shrink-0" v-for="(item,index) in discountList" @click="navClick(item)">
+                            <view class="w-full absolute left-0 top-0 z-10 text-[#fff] text-center pt-[14rpx]">
+                                <view class="text-[28rpx] leading-[39rpx] font-500 px-[10rpx] h-[39rpx] overflow-hidden" :class="{'!text-[#333]':active==item.active_id}">{{item.active_desc}}</view>
+                                <view class="flex justify-center w-full">
+                                    <text class="text-[22rpx] h-[36rpx] flex-center mt-[5rpx]" :class="{'active flex items-center justify-center':active==item.active_id}">{{item.active_status=='not_active'?'预告':item.active_status_name}}</text>
+                                </view>
+                            </view>
+                            <template v-if="active==item.active_id">
+                                <image v-if="discountList.length<4" class="absolute bottom-0 z-5 h-[110rpx] z-5" :class="{'left-0 w-[230rpx]':index==0,'left-[-41.25rpx] w-[270rpx]':index!=0}" :src="img(index==0?'addon/shop/discount/nav-left.png':'addon/shop/discount/nav-center.png')" />
+                                <image v-if="discountList.length>=4" class="absolute bottom-0 z-5 h-[110rpx] z-5" :class="{'left-0 w-[230rpx]':index==0,'left-[-41.25rpx] w-[270rpx]':index!=0&&index!=discountList.length-1 ,'right-0 w-[230rpx]':index==discountList.length-1}" :src="img(index==0?'addon/shop/discount/nav-left.png':index==discountList.length-1?'addon/shop/discount/nav-right.png':'addon/shop/discount/nav-center.png')" />
+                            </template>
+                        </view>
+                    </view>
+                </scroll-view>
+            </view>
+
+        </view>
+
+	    <mescroll-body v-if="discountList.length" ref="mescrollRef" :top="mescrollTop" @init="mescrollInit" :down="{ use: false }" @up="getActiveDiscountGoodsListFn">
+            <view class="sidebar-margin py-[var(--top-m)] bg-[#F4F6F8]">
+				<block v-for="(item,index) in list" :key="index">
+					<view class="bg-[#fff] p-[20rpx] flex rounded-[var(--rounded-big)]" :class="{'mb-[var(--top-m)]':index<list.length-1}" @click="toLink(item)">
+						<view class="w-[240rpx] h-[240rpx] rounded-[var(--goods-rounded-big)] overflow-hidden">
+							<u--image width="240rpx" height="240rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" model="aspectFill">
+								<template #error>
+									<image class="rounded-[var(--goods-rounded-big)] overflow-hidden w-[240rpx] h-[240rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+								</template>
+							</u--image>
+						</view>
+
+						<view class="ml-[20rpx] flex-1 flex flex-col justify-between">
+							<view class="text-[28rpx] leading-[1.4] multi-hidden">
+								{{ item.goods_name }}
+							</view>
+							
+							<view v-if="item.goods_label_name && item.goods_label_name.length" class="flex flex-wrap mb-[auto]">
+								<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+									<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+									<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+										{{tagItem.label_name}}
+									</view>
+								</template>
+							</view>
+
+							<view class="relative overflow-hidden w-full h-[88rpx] flex justify-between mt-[20rpx] rounded-[100rpx]" :class="{'bg-[var(--primary-color-light)]': item.activeGoods.active_goods_status=='active','bg-[#FFF6F1]': item.activeGoods.active_goods_status!='active' }">
+								<view class="mr-[20rpx] pl-[30rpx] flex-1 flex flex-col justify-center">
+									<view class="flex items-end">
+										<view class="text-[var(--price-text-color)] flex items-baseline" :class="{'!text-[#FF8540]':item.activeGoods.active_goods_status!='active'}">
+											<text class="text-[26rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
+											<text class="text-[44rpx] leading-[40rpx] font-500 price-font">{{parseFloat(item.goodsSku.active_discount_price).toFixed(2).split('.')[0]}}.</text>
+											<text class="text-[26rpx] leading-[28rpx] font-500 price-font">{{parseFloat(item.goodsSku.active_discount_price).toFixed(2).split('.')[1]}}</text>
+										</view>
+										<view v-if="item.goodsSku.active_discount_rate<10" class="mb-[4rpx] text-[var(--price-text-color)] px-[4rpx] border-[1rpx] border-[var(--primary-color)] border-solid  text-[18rpx] ml-[4rpx] rounded-[4rpx] leading-[24rpx]" :class="{'!border-[#FF8540]':item.activeGoods.active_goods_status!='active'}">{{item.goodsSku.active_discount_rate}}折</view>
+									</view>
+									<view class="flex items-center mt-[4rpx]">
+										<view class="w-[20rpx] h-[20rpx] mr-[4rpx] rounded-[20rpx] text-[#fff] bg-[var(--primary-color)] flex items-center justify-center" :class="{'!bg-[#FF8540]':item.activeGoods.active_goods_status!='active'}">
+											<text class="text-[10rpx] nc-icon-biaoqianV6mm1 nc-iconfont"></text>
+										</view>
+										<view class="text-[18rpx] font-400 text-[var(--price-text-color)] leading-[24rpx]" :class="{'!text-[#FF8540]':item.activeGoods.active_goods_status!='active'}">已省{{item.goodsSku.active_reduce_money}}元</view>
+									</view>
+								</view>
+								<view class="discount-btn text-[#ff763b] iconfont iconUnion" v-if="item.activeGoods.active_goods_status!='active'">
+									<text class="desc">{{item.activeGoods.active_goods_status_name}}</text>
+								</view>
+								<view class="discount-btn text-[#fb3f15] iconfont iconUnion" v-else>
+									<text class="icon iconfont iconqiang"></text>
+									<text class="arrow iconxiayibu iconfont"></text>
+								</view>
+							</view>
+						</view>
+					</view>
+                </block>
+				<mescroll-empty v-if="!list.length && !loading" :option="{tip : '暂无商品，请看看其他商品吧！'}"></mescroll-empty>
+            </view>
+        </mescroll-body>
+		
+		<view v-if="!discountList.length && !loading" class="h-[calc(100vh-550rpx)]" :style="{'padding-top':mescrollTop}">
+			<mescroll-empty  :option="{tip : '暂无商品，请看看其他商品吧！','btnText': '去逛逛'}" @emptyclick="redirect({ url: '/addon/shop/pages/goods/list' })"></mescroll-empty>
+		</view>
+		<loading-page :loading="bannerListLoading"></loading-page>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useLogin } from '@/hooks/useLogin'
+import { img, redirect, getToken, currRoute, diyRedirect,pxToRpx } from '@/utils/common';
+import { getActiveDiscountConfig,getActiveDiscountList,getActiveDiscountGoodsList } from '@/addon/shop/api/discount'
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import { topTabar } from '@/utils/topTabbar'
+import {useGoods} from '@/addon/shop/hooks/useGoods'
+
+let menuButtonInfo: any = {};
+// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+// #endif
+const diyGoods = useGoods();
+const headStyle = computed(() => {
+	let style = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 368) + 'rpx' : '490rpx'
+	return style
+})
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
+const bannerList: any = ref<Array<Object>>([])
+const discountList = ref<Array<Object>>([])
+const active = ref<number>(0)
+const active_name = ref<String>('')
+const list = ref<Array<Object>>([]);
+const loading = ref<boolean>(true);
+const bannerListLoading = ref<boolean>(true);
+
+/********* 自定义头部 - start ***********/
+const topTabarObj = topTabar()
+let param = topTabarObj.setTopTabbarParam({title:'限时折扣'})
+/********* 自定义头部 - end ***********/
+
+const imgList:any = ref([])
+
+const getActiveDiscountConfigFn = ()=>{
+	bannerListLoading.value = true
+    getActiveDiscountConfig().then((res:any)=>{
+        bannerList.value = res.data
+		imgList.value = bannerList.value.map((el: any)=>img(el.imageUrl))
+		bannerListLoading.value = false
+    }).catch(()=>{
+		bannerListLoading.value = false
+	})
+}
+
+getActiveDiscountConfigFn()
+const getActiveDiscountListFn = ()=>{
+    getActiveDiscountList({}).then((res:any)=>{
+        discountList.value = res.data
+		calculateHeight();
+		if(discountList.value&&discountList.value.length){
+			navClick(res.data[0]);
+		}else{
+			loading.value = false
+		}
+    })
+}
+getActiveDiscountListFn()
+const navClick = (item:any)=>{
+    active.value = item.active_id
+    active_name.value = item.active_status_name
+    getMescroll()?.resetUpScroll();
+	uni.pageScrollTo({
+	    scrollTop: 0, //距离页面顶部的距离
+	    duration: 1
+	});
+}
+const getActiveDiscountGoodsListFn = (mescroll: any) => {
+	if(discountList.value.length == 0) return;
+	
+	loading.value = true;
+	let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size,
+        active_id:active.value
+	};
+
+	getActiveDiscountGoodsList(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>).map((el: any) => {return el})
+		//设置列表数据
+		if (mescroll.num == 1) {
+			list.value = []; //如果是第一页需手动制空列表
+		}
+		list.value = list.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+		loading.value = false;
+	}).catch(() => {
+		loading.value = false;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+const toRedirect =(index:any)=>{
+	let data = bannerList.value[index].toLink
+	if (Object.keys(data).length) {
+		if (!data.name) return;
+		if (currRoute() == 'app/pages/member/index' && !getToken()) {
+			useLogin().setLoginBack({ url: data.url })
+			return;
+		}
+		diyRedirect(data);
+	}
+}
+
+const toLink = (item : any) => {
+	if (item.activeGoods.active_goods_status != 'active') {
+		uni.showToast({ title: `活动${ item.activeGoods.active_goods_status_name }`, icon: 'none' })
+		return;
+	}
+	redirect({ url: '/addon/shop/pages/goods/detail', param: { sku_id: item.goodsSku.sku_id, type: 'discount' } })
+}
+
+const mescrollTop = ref('')
+const calculateHeight = ()=>{
+	mescrollTop.value = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 368)+(discountList.value.length?70:0) + 'rpx' : (discountList.value.length?'560rpx':'490rpx')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/addon/shop/styles/common.scss';
+.swiper.ns-indicator-dots :deep(.uni-swiper-dots-horizontal) {
+	bottom:40rpx
+}
+.swiper.ns-indicator-dots :deep(.uni-swiper-dot) {
+	background-color: #fff;
+	opacity: 0.5;
+}
+.swiper.ns-indicator-dots :deep(.uni-swiper-dot-active) {
+    background-color: #fff;
+    opacity: 1;
+}
+.active{
+    padding: 0 14rpx;
+    line-height: 34rpx;
+    border-radius: 29rpx;
+    background: linear-gradient( 94deg, #FB7939 0%, #FE120E 99%), #EF000C;
+}
+.active-button{
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+:deep(.u-swiper-indicator__wrapper--line__bar){
+	height: 5rpx !important;
+}
+:deep(.u-swiper-indicator__wrapper--line){
+	height: 5rpx !important;
+}
+.discount-btn{
+	font-size: 88rpx;
+	margin-left: auto;
+	position: absolute;
+	right: -2rpx;
+	display: flex;
+	line-height: 1;
+	.icon{
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		left: 40rpx;
+		color: #fff;
+		font-size: 44rpx;
+	}
+	.arrow{
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		color: #fff;
+		right: 18rpx;
+		font-size: 16rpx;
+	}
+	.desc{
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		left: 34rpx;
+		color: #fff;
+		font-size: 26rpx;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/evaluate/components/upload-img.vue b/src/addon/shop/pages/evaluate/components/upload-img.vue
new file mode 100644
index 0000000..0cbf7a9
--- /dev/null
+++ b/src/addon/shop/pages/evaluate/components/upload-img.vue
@@ -0,0 +1,96 @@
+<template>
+    <view class="flex flex-wrap">
+        <view v-for="(item, index) in value" class="mb-[18rpx] relative" :class="{'mr-[18rpx]': (index + 1) % 4 != 0 }">
+            <u--image class="rounded-[10rpx] overflow-hidden" width="140rpx" height="140rpx" :src="img(item || '')" model="aspectFill" @click="imgListPreview(item)">
+                <template #error>
+                    <u-icon name="photo" color="#999" size="50"></u-icon>
+                </template>
+            </u--image>
+            <view class="absolute top-0 right-[0] bg-[#373737] flex justify-end h-[28rpx] w-[28rpx] rounded-bl-[40rpx]" @click.stop="deleteImg(index)">
+                <text class="nc-iconfont nc-icon-guanbiV6xx !text-[20rpx] mt-[2rpx] mr-[2rpx] text-[#fff]"></text>
+            </view>
+        </view>
+        <view class="w-[140rpx] h-[140rpx]" v-show="value.length < maxCount">
+            <u-upload @afterRead="afterRead" :maxCount="maxCount" :multiple="prop.multiple">
+                <view class="flex items-center justify-center w-[140rpx] h-[140rpx] border-[2rpx] border-dashed border-[#ddd] text-center text-[var(--text-color-light9)] rounded-[var(--goods-rounded-big)]">
+                    <view>
+                        <view class="nc-iconfont nc-icon-xiangjiV6xx text-[50rpx]"></view>
+                        <view class="text-[24rpx] mt-[12rpx]">{{ value.length }}/{{ maxCount }}</view>
+                    </view>
+                </view>
+            </u-upload>
+        </view>
+
+    </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { img } from '@/utils/common';
+import { uploadImage } from '@/app/api/system'
+
+const prop = defineProps({
+    modelValue: {
+        type: String || Array,
+    },
+    maxCount: {
+        type: Number,
+        default: 9
+    },
+    multiple: {
+        type: Boolean,
+        default: false
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const value: any = computed({
+    get() {
+        return prop.modelValue
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+const maxCount = computed(() => {
+    return prop.maxCount
+})
+const afterRead = (event:any) => {
+    if (prop.multiple) {
+        event.file.forEach((file: any) => {
+            upload({ file })
+        })
+    } else {
+        upload(event)
+    }
+}
+
+const upload = (event:any) => {
+    if (value.value?.length >= maxCount.value) {
+        uni.showToast({ title: `最多允许上传${maxCount.value}张图片`, icon: 'none' })
+        return false
+    }
+
+    uploadImage({
+        filePath: event.file.url,
+        name: 'file'
+    }).then(res => {
+        if (value.value?.length < maxCount.value) value.value.push(res.data.url)
+    }).catch(() => {
+    })
+}
+
+const deleteImg = (index:number)=>{
+    value.value.splice(index,1)
+}
+
+//预览图片
+const imgListPreview = (item:any) => {
+    if (item === '') return false
+    var urlList = []
+    urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+    uni.previewImage({
+        indicator: "number",
+        loop: true,
+        urls: urlList
+    })
+}
+</script>
diff --git a/src/addon/shop/pages/evaluate/list.vue b/src/addon/shop/pages/evaluate/list.vue
new file mode 100644
index 0000000..677bec6
--- /dev/null
+++ b/src/addon/shop/pages/evaluate/list.vue
@@ -0,0 +1,225 @@
+<template>
+    <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" :style="themeColor()">
+        <view class="fixed left-0 top-0 right-0 z-10">
+            <scroll-view scroll-x="true" class="tab-style-2">
+                <view class="tab-content">
+                    <view class="tab-items" :class="{ 'class-select': evaluateStatus === item.status }" @click="statusClickFn(item.status, item.value)" v-for="(item, index) in statusList">{{ item.name }}</view>
+                </view>
+            </scroll-view>
+        </view>
+        <mescroll-body ref="mescrollRef" top="88rpx" @init="mescrollInit" :down="{ use: false }" @up="getEvaluateListFn">
+            <view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
+                <template v-for="(item, index) in list">
+                    <view class="mb-[var(--top-m)] card-template !pb-[20rpx]">
+                        <view class="flex items-center  justify-between">
+                            <view class="flex items-center">
+                                <u-avatar :src="img(item.member_head)" :default-url="img('static/resource/images/default_headimg.png')" :size="'50rpx'" leftIcon="none" />
+                                <text class="text-[30rpx] font-500 ml-[10rpx]">{{ item.member_name }}</text>
+                            </view>
+                            <text class="text-[24rpx] text-[var(--text-color-light9)]">{{ item.create_time ? item.create_time.slice(0, 10) : '' }}</text>
+                        </view>
+
+                        <view class="pt-[30rpx] flex items-center">
+                            <u-rate :count="5" v-model="item.scores" active-color="var(--primary-color)" :size="'36rpx'" gutter="1" readonly></u-rate>
+                            <text class="ml-[20rpx] text-[26rpx] text-[var(--text-color-light9)]">{{ item.scores === 1 ? '差评' : item.scores === 2 || item.scores === 3 ? '中评' : '好评' }}</text>
+                        </view>
+                        <view class="text-[28rpx] break-all leading-[1.2] text-[#333] my-[20rpx] overflow-clip">{{ item.content }}</view>
+                        <template v-if="item.image_mid.length === 1">
+							<view class="w-[420rpx] mt-[10rpx]">
+								<u--image width="420rpx" height="420rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+									<template #error>
+										<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+									</template>
+								</u--image>
+							</view>
+                        </template>
+                        <template v-if="item.image_mid.length === 2">
+                            <view class="flex justify-between mt-[10rpx]">
+								<view class="w-[322rpx]">
+									<u--image width="322rpx" height="322rpx" :src="img(item.image_mid[0])" :radius="'var(--goods-rounded-big)'" model="aspectFill" @click="imgListPreview(item.images[0])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+								<view class="w-[322rpx]">
+									<u--image width="322rpx" height="322rpx" :src="img(item.image_mid[1])" :radius="'var(--goods-rounded-big)'" model="aspectFill" @click="imgListPreview(item.images[1])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+                            </view>
+                        </template>
+                        <template v-if="item.image_mid.length === 3">
+                            <view class="flex justify-between mt-[10rpx]">
+								<u--image width="430rpx" height="430rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+									<template #error>
+										<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+									</template>
+								</u--image>
+								<view>
+									<u--image width="205rpx" height="205rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[1])" model="aspectFill" @click="imgListPreview(item.images[1])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+									<view class="mt-[20rpx]">
+										<u--image width="205rpx" height="205rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[2])" model="aspectFill" @click="imgListPreview(item.images[2])">
+											<template #error>
+												<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+											</template>
+										</u--image>
+									</view>
+								</view>
+							</view>
+                        </template>
+                        
+						<template v-if="item.image_mid.length === 4">
+                            <view class="flex flex-wrap mt-[10rpx]">
+								<view class="mr-[15rpx] mb-[15rpx]">
+									<u--image width="215rpx" height="215rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+								<view class="mr-[15rpx] mb-[15rpx]">
+									<u--image width="215rpx" height="215rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[1])" model="aspectFill" @click="imgListPreview(item.images[1])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+								<view class="mr-[15rpx]">
+									<u--image width="215rpx" height="215rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[2])" model="aspectFill" @click="imgListPreview(item.images[2])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+								<view class="mr-[15rpx]">
+									<u--image width="215rpx" height="215rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.image_mid[3])" model="aspectFill" @click="imgListPreview(item.images[3])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+                            </view>
+                        </template>
+                        <template v-if="item.image_mid.length > 4">
+                            <view class="flex flex-wrap mt-[10rpx]">
+								<view v-for="(imageItem, imageIndex) in item.image_mid" class="mb-[10rpx]" :class="{'mr-[10rpx]':(imageIndex + 1) % 3 != 0}">
+									<u--image width="211rpx" height="211rpx" :src="img(imageItem)" model="aspectFill" :radius="'var(--goods-rounded-big)'" @click="imgListPreview(item.images[imageIndex])">
+										<template #error>
+											<u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+                            </view>
+                        </template>
+                        <view v-if="item.explain_first !=''" class="text-[26rpx]  !text-[var(--text-color-light6)] mt-[20rpx] pt-[20rpx] border-0 border-t-[2rpx] border-solid border-[#ebebec] w-[100%] overflow-clip leading-[1.2]  break-all">
+                            <text class=" text-[var(--primary-color)]">商家回复：</text>{{ item.explain_first }}
+                        </view>
+                    </view>
+                </template>
+            </view>
+            <mescroll-empty v-if="!list.length && loading" :option="{tip : '暂无评价'}"></mescroll-empty>
+        </mescroll-body>
+        <pay ref="payRef"></pay>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { img } from '@/utils/common'
+import { getEvaluateList } from '@/addon/shop/api/evaluate'
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
+import { onLoad, onUnload,onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
+const list = ref<Array<Object>>([]);
+const loading = ref<boolean>(false);
+const statusList = <Array<Object>>([
+    { status: 1, name: '全部', value: [] },
+    { status: 2, name: '好评', value: [4, 5] },
+    { status: 3, name: '中评', value: [2, 3] },
+    { status: 4, name: '差评', value: [1] },
+]);
+const evaluateStatus = ref(1);
+const evaluateValue = ref([]);
+const goodsId = ref('')
+onLoad((option: any) => {
+    goodsId.value = option.goods_id || ''
+})
+
+const statusClickFn = (status: any, value: any) => {
+    evaluateStatus.value = status;
+    evaluateValue.value = value
+    list.value = []; //如果是第一页需手动制空列表
+    getMescroll().resetUpScroll();
+};
+
+const getEvaluateListFn = (mescroll:any) => {
+    loading.value = false;
+    let data: object = {
+        page: mescroll.num,
+        limit: mescroll.size,
+        goods_id: goodsId.value,
+        scores: evaluateValue.value
+    };
+
+    getEvaluateList(data).then((res:any) => {
+        let newArr = (res.data.data as Array<Object>);
+        //设置列表数据
+        if (mescroll.num == 1) {
+            list.value = []; //如果是第一页需手动制空列表
+        }
+        list.value = list.value.concat(newArr);
+		
+        mescroll.endSuccess(newArr.length);
+        loading.value = true;
+    }).catch(() => {
+        loading.value = true;
+        mescroll.endErr(); // 请求失败, 结束加载
+    })
+}
+//预览图片
+const imgListPreview = (item:any) => {
+    if (item === '') return false
+    var urlList = []
+    urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+    uni.previewImage({
+        indicator: "number",
+        loop: true,
+        urls: urlList
+    })
+}
+
+//关闭预览图片
+onUnload(()=>{
+	// #ifdef  H5 || APP
+	uni.closePreviewImage()
+	// #endif
+})
+</script>
+
+<style lang="scss" scoped>
+.class-select {
+    position: relative;
+    font-weight: bold;
+
+    &::before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        height: 6rpx;
+        background-color: var(--primary-color);
+        width: 90%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+</style>
diff --git a/src/addon/shop/pages/evaluate/order_evaluate.vue b/src/addon/shop/pages/evaluate/order_evaluate.vue
new file mode 100644
index 0000000..6add4f6
--- /dev/null
+++ b/src/addon/shop/pages/evaluate/order_evaluate.vue
@@ -0,0 +1,161 @@
+<template>
+	<view class="bg-[var(--page-bg-color)] min-h-screen" :style="themeColor()">
+		<view class="px-[var(--sidebar-m)] py-[var(--top-m)]">
+			<template v-for="(item, index)  in info" :key="index">
+				<view class="card-template mb-[var(--top-m)]">
+					<view class="bg-[var(--temp-bg)] p-[20rpx] rounded-[var(--rounded-mid)] flex">
+						<u--image radius="var(--goods-rounded-mid)" width="150rpx" height="150rpx" :src="img(item.goods_image_thumb_small ? item.goods_image_thumb_small : '')" model="aspectFill">
+							<template #error>
+								<u-icon name="photo" color="#999" size="50"></u-icon>
+							</template>
+						</u--image>
+						<view class="flex-1 flex flex-wrap ml-[20rpx] my-[4rpx]">
+							<view>
+								<view class="text-[26rpx] leading-[40rpx] max-w-[450rpx] truncate">{{ item.goods_name }}</view>
+								<view class="max-w-[450rpx] mt-[14rpx] truncate text-[22rpx] text-[var(--text-color-light9)] leading-[28rpx]" v-if="item.sku_name">{{ item.sku_name }}</view>
+							</view>
+							<view class="mt-auto w-full flex justify-between items-center">
+								<view class="flex items-baseline  price-font">
+									<text class="text-[24rpx] font-500">￥</text>
+									<text class="text-[40rpx] font-500">{{ parseFloat(item.price).toFixed(2).split('.')[0] }}</text>
+									<text class="text-[24rpx] font-500">.{{ parseFloat(item.price).toFixed(2).split('.')[1] }}</text>
+								</view>
+								<text class="font-400 text-[28rpx] text-[#333]">x{{ item.num }}</text>
+							</view>
+						</view>
+					</view>
+					<view class="flex items-center mt-[30rpx]">
+						<u-rate :count="5" v-model="form[index].scores" active-color="var(--primary-color)" :size="'36rpx'" gutter="1"></u-rate>
+						<text class="ml-[16rpx] text-[28rpx] pt-[2rpx] text-[var(--primary-color)]">{{ form[index].scores === 1 ? '差评' : form[index].scores === 2 || form[index].scores === 3 ? '中评' : '好评' }}</text>
+					</view>
+					<textarea
+						class="!text-[26rpx] px-[2rpx] mt-[16rpx] w-[100%] !text-[#333] !leading-[1.5]"
+						v-model.trim="form[index].content" placeholder="请在此处输入你的评价" placeholderClass="text-[26rpx] text-[var(--text-color-light9)]" maxlength="200" />
+					<!-- <view class="text-right text-[24rpx] text-[var(--text-color-light6)]">{{ form[index].content.length >= 200 ? 200 : form[index].content.length }}/200</view> -->
+					<upload-img class="mt-[20rpx]" v-model="form[index].images" :max-count="9" :multiple="true" />
+				</view>
+			</template>
+		</view>
+		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" zIndex="9999">
+			<view class="flex items-center pl-[30rpx] pr-[20rpx] box-border  justify-between w-[100%]">
+				<view class="flex items-center" @click="selectCheck">
+					<text class="iconfont text-color text-[30rpx] mr-[12rpx] text-[var(--text-color-light9)]"
+						:class="{'iconxuanze1 text-[var(--primary-color)]' : is_anonymous === '1' ,'nc-iconfont nc-icon-yuanquanV6xx':is_anonymous !== '1'}"></text>
+					<text class="text-[28rpx] leading-[34rpx]"
+						:class="{'text-[var(--primary-color)]' :is_anonymous === '1', 'text-[var(--text-color-light6)]':is_anonymous !== '1'}">匿名</text>
+				</view>
+				<button
+					class="!w-[240rpx] !h-[70rpx] text-[26rpx] !m-0 flex-center rounded-full text-white primary-btn-bg remove-border font-500"
+					hover-class="none" @click="submit">提交</button>
+			</view>
+		</u-tabbar>
+		<loading-page :loading="loading"></loading-page>
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+<script lang="ts" setup>
+	import { ref,nextTick } from 'vue';
+	import { getShopOrderDetail } from '@/addon/shop/api/order';
+	import { setOrderEvaluate } from '@/addon/shop/api/evaluate';
+	import { onLoad } from '@dcloudio/uni-app';
+	import { img, redirect, goback } from '@/utils/common';
+	import uploadImg from '@/addon/shop/pages/evaluate/components/upload-img'
+
+	const info = ref<Array<any>>([])
+	const form = ref<Array<any>>([])
+	const is_anonymous = ref('2')
+	const loading = ref(false)
+	const order_id = ref('')
+
+	const wxPrivacyPopupRef:any = ref(null)
+
+	onLoad((option: any) => {
+        if(option.order_id){
+            order_id.value = option.order_id
+            getShopOrderDetailFn(order_id.value)
+
+            // #ifdef MP
+            nextTick(()=>{
+                if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+            })
+            // #endif
+        }else{
+			let parameter = {
+				url:'/addon/shop/pages/order/list',
+				param: {
+					status: 5
+				},
+				title: '缺少订单id'
+			};
+			goback(parameter)
+        }
+	})
+
+	const getShopOrderDetailFn = (id: any) => {
+		loading.value = true
+		getShopOrderDetail(id).then((res: any) => {
+			if (res.data.is_evaluate) {
+				toLink(order_id.value)
+				return false
+			}
+			res.data.order_goods.forEach((el: any) => {
+				if (el.status != 1 || el.is_enable_refund == 1) {
+					// 排除存在退款的情况
+				}else {
+					info.value.push(el);
+					form.value.push({
+						order_id: el.order_id,
+						order_goods_id: el.order_goods_id,
+						goods_id: el.goods_id,
+						content: '',
+						images: [],
+						scores: 5
+					})
+				}
+
+			})
+			loading.value = false
+		}).catch(() => {
+			loading.value = false
+		})
+	}
+
+	const selectCheck = () => {
+		is_anonymous.value = is_anonymous.value === '1' ? '2' : '1'
+	}
+
+	const submit = () => {
+		if (form.value.some(el => el.content == '')) {
+			uni.showToast({ title: '请输入你的评价', icon: 'none' })
+			return false
+		}
+		for (let i = 0; i < form.value.length; i++) {
+			let item = form.value[i];
+			if (item.content.length > 200) {
+				item.content = item.content.substr(0, 200);
+			}
+		}
+		form.value.forEach(v => v.is_anonymous = is_anonymous.value)
+		loading.value = true
+		setOrderEvaluate({ evaluate_array: form.value }).then(res => {
+			loading.value = false
+			toLink(order_id.value)
+		}).catch(() => {
+			loading.value = false
+		})
+	}
+
+	const toLink = (order_id : any) => {
+		redirect({ url: '/addon/shop/pages/evaluate/order_evaluate_view', param: { order_id }, mode: 'redirectTo' })
+	}
+</script>
+<style lang="scss">
+	.remove-border {
+		&::after {
+			border: none;
+		}
+	}
+</style>
diff --git a/src/addon/shop/pages/evaluate/order_evaluate_view.vue b/src/addon/shop/pages/evaluate/order_evaluate_view.vue
new file mode 100644
index 0000000..7611447
--- /dev/null
+++ b/src/addon/shop/pages/evaluate/order_evaluate_view.vue
@@ -0,0 +1,173 @@
+<template>
+     <view class="bg-[var(--page-bg-color)] min-h-screen" :style="themeColor()">
+		 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getShopOrderFn">
+			<view class="px-[var(--sidebar-m)] py-[var(--top-m)]" v-if="info.length">
+               <template v-for="(item, index)  in info" :key="index">
+                    <view class="card-template mb-[var(--top-m)]">
+						<view class="bg-[var(--temp-bg)] p-[20rpx] rounded-[var(--rounded-mid)] flex" @click="redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: item.goods_id } })">
+							<u--image radius="var(--goods-rounded-mid)" width="150rpx" height="150rpx" :src="img(item.order_goods.goods_image_thumb_mid ? item.order_goods.goods_image_thumb_mid : '')" model="aspectFill">
+								 <template #error>
+									  <u-icon name="photo" color="#999" size="50"></u-icon>
+								 </template>
+							</u--image>
+							<view class="flex-1 flex flex-wrap ml-[20rpx] my-[4rpx]">
+								 <view>
+									  <view class="text-[26rpx] leading-[40rpx] max-w-[450rpx] truncate">{{ item.order_goods.goods_name }}</view>
+									  <view class="max-w-[450rpx] mt-[14rpx] truncate text-[22rpx] text-[var(--text-color-light9)] leading-[28rpx]" v-if="item.order_goods.sku_name">{{ item.order_goods.sku_name }}</view>
+								 </view>
+								 <view class="mt-auto w-full flex justify-between items-center">
+									  <view class="flex items-baseline  price-font">
+										  <text class="text-[24rpx] font-500">￥</text>
+										  <text class="text-[40rpx] font-500">{{ parseFloat(item.order_goods.price).toFixed(2).split('.')[0] }}</text>
+										  <text class="text-[24rpx] font-500">.{{ parseFloat(item.order_goods.price).toFixed(2).split('.')[1] }}</text>
+									  </view>
+									  <text class="font-400 text-[28rpx] text-[#333]">x{{ item.order_goods.num }}</text>
+								 </view>
+							</view>
+						</view>
+                         <view class="flex items-center mt-[30rpx]">
+                            <u-rate :count="5" v-model="item.scores" active-color="var(--primary-color)" :size="'36rpx'" gutter="1" readonly></u-rate>
+                            <text class="ml-[16rpx] text-[28rpx] pt-[2rpx] text-[var(--primary-color)]">{{ item.scores === 1 ? '差评' : item.scores === 2 || item.scores === 3 ? '中评' : '好评' }}</text>
+                         </view>
+                         <view class="px-[2rpx] text-[28rpx] text-[#333] mt-[16rpx] mb-[20rpx] break-all leading-[1.5]">{{ item.content }}</view>
+                         <template v-if="item.image_mid.length === 1">
+                            <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden mt-[10rpx]" width="420rpx" height="420rpx" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+                                <template #error>
+                                    <u-icon name="photo" color="#999" size="50"></u-icon>
+                                </template>
+                            </u--image>
+                        </template>
+                        <template v-if="item.image_mid.length === 2">
+                            <view class="flex justify-between mt-[10rpx]">
+                                <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden" width="322rpx" height="322rpx" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                                <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden" width="322rpx" height="322rpx" :src="img(item.image_mid[1])" model="aspectFill" @click="imgListPreview(item.images[1])">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                            </view>
+                        </template>
+                        <template v-if="item.image_mid.length === 3">
+                            <view class="flex justify-between mt-[10rpx]">
+                                <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden" width="430rpx" height="430rpx" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                                <view>
+                                    <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden mb-[20rpx]" width="205rpx" height="205rpx" :src="img(item.image_mid[1])" model="aspectFill" @click="imgListPreview(item.images[1])">
+                                        <template #error>
+                                            <u-icon name="photo" color="#999" size="50"></u-icon>
+                                        </template>
+                                    </u--image>
+                                    <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden" width="205rpx" height="205rpx" :src="img(item.image_mid[2])" model="aspectFill" @click="imgListPreview(item.images[2])">
+                                        <template #error>
+                                            <u-icon name="photo" color="#999" size="50"></u-icon>
+                                        </template>
+                                    </u--image>
+                                </view>
+                            </view>
+                        </template>
+                        <template v-if="item.image_mid.length === 4">
+                            <view class="flex flex-wrap mt-[10rpx]">
+                                <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden mr-[15rpx] mb-[15rpx]" width="215rpx" height="215rpx" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                                <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden mr-[15rpx] mb-[15rpx]" width="215rpx" height="215rpx" :src="img(item.image_mid[1])" model="aspectFill" @click="imgListPreview(item.images[1])">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                                <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden mr-[15rpx]" width="215rpx" height="215rpx" :src="img(item.image_mid[2])" model="aspectFill" @click="imgListPreview(item.images[2])">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                                <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden mr-[15rpx]" width="215rpx" height="215rpx" :src="img(item.image_mid[3])" model="aspectFill" @click="imgListPreview(item.images[3])">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                            </view>
+                        </template>
+                        <template v-if="item.image_mid.length > 4">
+                            <view class="flex flex-wrap mt-[10rpx]">
+                                <u--image v-for="(imageItem, imageIndex) in item.images"
+                                    :class="['rounded-[var(--goods-rounded-big)] overflow-hidden mb-[10rpx]', (imageIndex + 1) % 3 === 0 ? '' : 'mr-[10rpx]']"
+                                    width="211rpx" height="211rpx" :src="img(imageItem)" model="aspectFill"
+                                    @click="imgListPreview(imageItem)">
+                                    <template #error>
+                                        <u-icon name="photo" color="#999" size="50"></u-icon>
+                                    </template>
+                                </u--image>
+                            </view>
+                        </template>
+                        <view v-if="item.explain_first !=''" class="text-[26rpx] !text-[var(--text-color-light6)] mt-[20rpx] pt-[20rpx] border-0 border-t-[2rpx] border-solid border-[#F1F2F5] w-[100%] overflow-clip leading-[34rpx] break-all">
+                            <text class="text-[var(--primary-color)]">商家回复：</text>
+							<text>{{ item.explain_first }}</text>
+                        </view>
+                    </view>
+               </template>
+			</view>
+			<mescroll-empty v-if="!info.length && !loading" :option="{tip : '暂无评价'}" ></mescroll-empty>
+		    <loading-page :loading="loading"></loading-page>
+		  </mescroll-body>
+     </view>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { getOrderEvaluate } from '@/addon/shop/api/evaluate';
+import { onLoad,onUnload,onPageScroll,onReachBottom } from '@dcloudio/uni-app';
+import { img, redirect, goback } from '@/utils/common';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+ 
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const info = ref<Array<any>>([])
+const loading = ref(true)
+onLoad((option:any) => {
+    if(option.order_id){
+        getOrderEvaluateFn(option.order_id)
+    }else{
+        let parameter = {
+            url:'/addon/shop/pages/evaluate/list',
+            title: '缺少订单id'
+        };
+        goback(parameter)
+    }
+})
+const getOrderEvaluateFn = (id: any) => {
+     loading.value = true
+     getOrderEvaluate(id).then((res: any) => {
+          info.value = res.data
+          loading.value = false
+     }).catch(()=>{
+          loading.value = false
+     })
+}
+
+//预览图片
+const imgListPreview = (item:any) => {
+    if (item === '') return false
+    var urlList = []
+    urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+    uni.previewImage({
+        indicator: "number",
+        loop: true,
+        urls: urlList
+    })
+}
+
+// 关闭预览图片
+onUnload(()=>{
+    // #ifdef  H5 || APP
+    uni.closePreviewImage()
+    // #endif
+})
+</script>
diff --git a/src/addon/shop/pages/goods/browse.vue b/src/addon/shop/pages/goods/browse.vue
new file mode 100644
index 0000000..88a48f1
--- /dev/null
+++ b/src/addon/shop/pages/goods/browse.vue
@@ -0,0 +1,266 @@
+<template>
+    <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" :style="themeColor()">
+        <view class="fixed top-0 left-0 right-0 z-200">
+            <view class="tab-style-1 py-[20rpx] bg-[#fff] border-0  border-solid border-b-[1rpx] border-[#f6f6f6] ">
+                <view class="tab-left text-[28rpx]">
+                    <text>共</text>
+                    <text class="text-primary">{{ browseTotal }}</text>
+                    <text>条</text>
+                </view>
+                <view class="tab-right !items-center">
+                <view class="flex items-center" @click="handleSelect">
+                        <view class="tab-right-date">日期</view>
+                        <view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
+                </view>
+                <view class="w-[2rpx] h-[28rpx] mx-[20rpx] bg-gradient-to-b from-[#333] to-[#fff]"></view>
+                <view  @click="isEdit = !isEdit" class="text-[#333] text-[28rpx]">{{ isEdit ? '完成' : '管理' }}</view>
+                </view>
+            </view>
+        </view>
+        <mescroll-body ref="mescrollRef" top="76" bottom="168"  @init="mescrollInit" :down="{ use: false }" @up="getBrowseListFn">
+            <view v-if="browseList.length">
+                <view class="bg-[#fff] mb-[20rpx] pt-[30rpx] px-[20rpx]"  v-for="(item,index) in browseList" :key="index">
+                    <view class="flex items-center h-[34rpx]  mb-[20rpx]">
+                        <view class="self-center w-[58rpx]  flex items-center" v-if="isEdit" @click.stop="isSelectGroup(item)">
+                            <view class="bg-[#fff] w-[34rpx] h-[34rpx] rounded-[17rpx] flex items-center justify-center">
+                                <text class=" iconfont text-primary text-[34rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden shrink-0" :class="{ 'iconxuanze1':item.checked,'bg-[#F5F5F5]':!item.checked}" >
+                                </text>
+                            </view>
+                        </view>
+                        <view class="text-[28rpx] font-500 text-[#333] ">{{ item.date }}</view>
+                    </view>
+                    <view class="flex flex-wrap">
+                        <view class="w-[230rpx] mb-[20rpx]" :class="{'mr-[10rpx]': (subIndex + 1) % 3 }" v-for="(subItem,subIndex) in item.list" :key="subIndex" @click="toDetail(subItem)">
+                            <view class="relative w-[230rpx] h-[230rpx] rounded-[var(--goods-rounded-mid)] overflow-hidden mb-[10rpx]">
+                                <u--image width="230rpx" height="230rpx" :radius="'var(--goods-rounded-mid)'" :src="img(subItem.goods_cover_thumb_mid ? subItem.goods_cover_thumb_mid : '')" mode="aspectFill">
+                                    <template #error>
+                                        <image class="w-[230rpx] h-[230rpx] rounded-[var(--goods-rounded-mid)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+                                    </template>
+                                </u--image>
+                                <view v-if="subItem.status == 0 " class="absolute left-0 top-0  w-[230rpx] h-[230rpx]  leading-[230rpx] text-center " style="background-color: rgba(0,0,0,0.3);">
+                                    <text class="text-[#fff] text-[28rpx]">已失效</text>
+                                </view>
+                                <view class="absolute top-0 left-0 right-0 bottom-0 p-[10rpx] flex justify-end items-start z-100" v-if="isEdit" @click.stop="changeItem(item,subItem)">
+                                <view class="bg-[#fff] w-[34rpx] h-[34rpx] rounded-[17rpx] flex items-center justify-center">
+                                        <text class="iconfont text-primary text-[34rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden shrink-0" :class="{ 'iconxuanze1':subItem.checked,'bg-[#F5F5F5]':!subItem.checked}"></text>
+                                </view>
+                                </view>
+                            </view>
+                            <view class="text-[var(--price-text-color)] price-font">
+                                <text class="text-[24rpx] font-500">￥</text>
+                                <text class="text-[40rpx] font-500">{{ parseFloat(subItem.price).toFixed(2).split('.')[0] }}</text>
+                                <text class="text-[24rpx] font-500">.{{ parseFloat(subItem.price).toFixed(2).split('.')[1] }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <mescroll-empty  v-if="!browseList.length && loading" :option="{tip : '暂无浏览的商品'}"></mescroll-empty>
+        </mescroll-body>
+        <view v-if="browseList.length && isEdit" class="fixed left-0 right-0 bottom-0 z-200 bg-[#fff]  pb-ios">
+            <view v-if="checkedNum" class="h-[66rpx] flex items-center justify-between pl-[30rpx] pr-[20rpx] border-0  border-b-[1rpx] border-solid border-[#f6f6f6]">
+                <view class="text-[24rpx]">
+                    <text>已选</text>
+                    <text class="text-primary">{{ checkedNum }}</text>
+                    <text>件宝贝</text>
+                </view>
+                <view class="text-[24rpx] text-[#999]" @click="clearBrowseFn">一键清空宝贝足迹</view>
+            </view>
+            <view class="flex h-[100rpx] items-center  justify-between pl-[30rpx] pr-[20rpx]">
+                <view class="flex items-center" @click="allChange">
+                    <text class="self-center iconfont text-primary text-[34rpx] mr-[10rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden flex-shrink-0" :class="{'iconxuanze1': isSelectAll, 'bg-color': !isSelectAll }  "></text>
+                    <text class="font-400 text-[#303133] text-[26rpx]">全选</text>
+                </view>
+                <button class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="deleteBrowseFn">删除</button>
+            </view>
+        </view>
+       
+        <!-- 时间选择 -->
+		<select-date ref="selectDateRef" @confirm="confirmFn"  />
+</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { img, redirect } from '@/utils/common';
+import { getBrowse, delBrowse } from '@/addon/shop/api/goods';
+import selectDate from '@/components/select-date/select-date.vue';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+
+const isEdit = ref(false)
+let loading = ref<boolean>(false);
+const optionLoading = ref(false)
+const browseTotal = ref<number>(0);
+let browseList = ref<any>([]);
+const create_time = ref([])
+let dateList = ref<any>([])
+const getBrowseListFn = (mescroll: any) =>{
+    loading.value = false;
+    let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size,
+        date: create_time.value
+	};
+    getBrowse(data).then((res: any) => {
+        browseTotal.value = res.data.total;
+        let newArr = (res.data.data as Array<Object>);
+        //设置列表数据
+		if (Number(mescroll.num) === 1) {
+			browseList.value = []; //如果是第一页需手动制空列表
+		}  
+        // 按日期分组
+        const groupedData = newArr.reduce((acc: any, item: any) => {
+            const date = item.browse_time.split(' ')[0]; // 提取日期部分
+            if (!acc[date]) {
+                acc[date] = [];
+            }
+            acc[date].push(item);
+            return acc;
+        }, {});
+
+        // 转换为所需格式
+        const formattedData = Object.keys(groupedData).map(date => ({
+            date: date,
+            list: groupedData[date]
+        }));
+        formattedData.forEach((item: any) => {
+            item.checked = false;
+            item.list.forEach((subItem: any)=> {
+                subItem.checked = false; // 初始化选中状态
+            });
+        });
+        // 合并相同日期的数据
+        formattedData.forEach((newItem: any) => {
+            const existingItemIndex = browseList.value.findIndex((item: any) => item.date === newItem.date);
+            if (existingItemIndex !== -1) {
+                // 合并到已有的日期数据中
+                browseList.value[existingItemIndex].list = [...browseList.value[existingItemIndex].list, ...newItem.list];
+            } else {
+                // 新增日期数据
+                browseList.value.push(newItem);
+            }
+        });
+		mescroll.endSuccess(newArr.length);
+		loading.value = true;
+    }).catch(() => {
+        loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+    })
+}
+
+
+
+// 选择数量
+const checkedNum = computed(() => {
+	let num = 0
+	browseList.value.forEach((item: any) => {
+		item.list.forEach((subItem: any)=>{
+            subItem.checked && (num += 1)
+        })
+	})
+	return num
+})
+
+/**
+ * 全选
+ */
+//判断是否全选状态
+const isSelectAll = ref(false)
+const isallclick = ()=>{
+    const isActve = browseList.value.every((item: any) => {
+        return item.checked
+    })
+    if (isActve) { isSelectAll.value = true } else { isSelectAll.value= false }
+}
+// 选择每天的
+const isSelectGroup = (data: any) =>{
+    data.checked = !data.checked
+    data.list.forEach((item :any) => {
+        item.checked = data.checked
+    })
+    isallclick()
+}
+// 全选
+const allChange = () =>{
+    isSelectAll.value = !isSelectAll.value
+    browseList.value.forEach((item: any) => {
+        item.checked = isSelectAll.value
+        item.list.forEach((subItem: any) => {
+            subItem.checked = isSelectAll.value
+        })
+    })
+}
+// 选择单个商品
+const changeItem = (data: any,value: any) =>{
+    value.checked = !value.checked
+    const isActve = data.list.every((item: any) => {
+        return item.checked
+    })
+    if (isActve) { data.checked = true } else { data.checked = false }
+    isallclick()
+}
+
+// 删除
+const deleteBrowseFn = () => {
+    if (!checkedNum.value) {
+		uni.showToast({ title: '还没有选择商品', icon: 'none' })
+		return
+	}
+    if (optionLoading.value) return
+	optionLoading.value = true
+
+    const ids: any = []
+	browseList.value.forEach((item: any) => {
+        item.list.forEach((subItem: any) => {
+            subItem.checked && ids.push(subItem.goods_id)
+        })
+    })
+    delBrowse({goods_ids: ids}).then((res: any) => {
+        optionLoading.value = false
+        getMescroll().resetUpScroll();
+    })
+}
+
+const clearBrowseFn = () => {
+    if (optionLoading.value) return
+	optionLoading.value = true
+
+    const ids: any = []
+	browseList.value.forEach((item: any) => {
+        item.list.forEach((subItem: any) => {
+            ids.push(subItem.goods_id)
+        })
+    })
+
+    delBrowse({goods_ids: ids}).then((res: any) => {
+        getMescroll().resetUpScroll();
+        optionLoading.value = false
+    })
+}
+//日期筛选
+const selectDateRef = ref<any>(null)
+const handleSelect = () =>{
+	selectDateRef.value.show = true
+}
+// 确定时间筛选
+const confirmFn = (data: any) =>{
+	create_time.value = data;
+    browseList.value = []
+    getMescroll().resetUpScroll();
+}
+
+
+const toDetail = (data: any) => {
+    redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
+}
+</script>
+
+<style lang="scss" scoped>
+.bg-color{
+	background-color: #f5f5f5;
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/goods/cart.vue b/src/addon/shop/pages/goods/cart.vue
new file mode 100644
index 0000000..d833a10
--- /dev/null
+++ b/src/addon/shop/pages/goods/cart.vue
@@ -0,0 +1,703 @@
+<template>
+    <view :style="themeColor()">
+        <view class="bg-page min-h-[100vh] overflow-hidden flex flex-col" v-if="!loading">
+			<view  v-if="!info" class="pb-[100rpx]">
+				<view class="empty-page">
+					<image class="img" :src="img('static/resource/images/system/login.png')" model="aspectFit" />
+					<view class="desc">暂未登录</view>
+					<button shape="circle" plain="true" class="btn" @click="toLogin">去登录</button>
+				</view>
+				<ns-goods-recommend></ns-goods-recommend>
+			</view>
+			<view v-else-if="!cartList.length&&!invalidList.length"  class="pb-[100rpx]">
+				<view  class="empty-page">
+					<image class="img" :src="img('addon/shop/cart-empty.png')" model="aspectFit" />
+					<view class="desc">赶紧去逛逛, 购买心仪的商品吧</view>
+					<button shape="circle" plain="true" class="btn" @click="redirect({ url: '/addon/shop/pages/goods/list' })">去逛逛</button>
+				</view>
+				<ns-goods-recommend></ns-goods-recommend>
+			</view>
+            <block v-else>
+                <view class="flex-1 h-0">
+                    <scroll-view class="scroll-height " :scroll-y="true">
+                        <view class="py-[var(--top-m)] sidebar-margin">
+                            <view class="bg-[#fff] pb-[10rpx] box-border rounded-[var(--rounded-big)]" v-if="cartList.length">
+                                <view class="flex mx-[var(--rounded-big)] pt-[var(--pad-top-m)] justify-between items-center box-border font-400 text-[24rpx] mb-[24rpx] leading-[30rpx]">
+                                    <view class="flex items-baseline text-[24rpx] text-[#333]">
+										<text>共</text>
+										<text class="text-[32rpx] mx-[2rpx] text-[var(--price-text-color)]">{{ cartList.length }}</text>
+										<text>种商品</text>
+									</view>
+                                    <text @click="isEdit = !isEdit" class="text-[var(--text-color-light6)] text-[24rpx]">{{ isEdit ? '完成' : '管理' }}</text>
+                                </view>
+                                <u-swipe-action ref="swipeActive">
+                                    <block v-for="(item, index) in cartList">
+                                            <view v-if="item.goodsSku" class="py-[20rpx] overflow-hidden w-full">
+                                                <u-swipe-action-item :options="cartOptions" @click="swipeClick(index,item)">
+                                                    <view class="flex px-[var(--pad-sidebar-m)]" @click.stop="selectOnlyGoods(item)">
+														<view class="self-center w-[34rpx] mr-[24rpx] h-[60rpx] flex items-center" @click.stop="selectOnlyGoods(item)">
+															<text
+																class=" iconfont text-color text-[34rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden shrink-0"
+																:class="{ 'iconxuanze1':item.checked,'bg-[#F5F5F5]':!item.checked}">
+															</text>
+														</view>
+                                                        <view class="w-[200rpx] h-[200rpx] flex items-center justify-center rounded-[var(--goods-rounded-big)] overflow-hidden" @click="toDetail(item)">
+															<u--image radius="var(--goods-rounded-big)" width="200rpx" height="200rpx" :src="img(item.goodsSku.sku_image_thumb_mid||'')" model="aspectFill">
+															    <template #error>
+															        <image class="w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+															    </template>
+															</u--image>
+														</view>
+                                                        <view class="flex flex-1 flex-col justify-between ml-[20rpx]">
+                                                            <view class="w-[100%] flex flex-col items-baseline">
+                                                                <view class="text-[#333] text-[28rpx] max-h-[80rpx] leading-[40rpx] multi-hidden font-400">
+																	{{ item.goods.goods_name }}
+																</view>
+                                                                <view class="box-border max-w-[376rpx] mt-[10rpx] px-[14rpx] h-[36rpx] leading-[36rpx] truncate text-[var(--text-color-light6)] bg-[#F5F5F5] text-[22rpx] rounded-[20rpx]" v-if="item.goodsSku && item.goodsSku.sku_spec_format">
+                                                                    {{ item.goodsSku.sku_spec_format }}
+                                                                </view>
+                                                            </view>
+															<view v-if="item.goods && item.goods.goods_label_name && item.goods.goods_label_name.length" class="flex flex-wrap mb-[auto]">
+																<template v-for="(tagItem, tagIndex) in item.goods.goods_label_name">
+																	<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+																	<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+																		{{tagItem.label_name}}
+																	</view>
+																</template>
+															</view>
+															<view v-if="item.manjian_info && Object.keys(item.manjian_info).length && item.manjian_info.is_show" class="flex items-center mt-[8rpx] mb-[auto]" @click.stop="manjianOpenFn(item.manjian_info)">
+																<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[20rpx] flex items-center justify-center w-[88rpx] h-[36rpx] mr-[6rpx]">满减送</view>
+																<text class="text-[22rpx] text-[#999]">{{item.manjian_info.manjian_name}}</text>
+															</view>
+															<view class="flex justify-between items-end self-end mt-[10rpx] w-[100%]">
+																<view class="text-[var(--price-text-color)] price-font truncate max-w-[200rpx]">
+																	<text class="text-[24rpx] font-500">￥</text>
+																	<text class="text-[40rpx] font-500">{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
+																	<text class="text-[24rpx] font-500">.{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
+																</view>
+																<u-number-box v-model="item.num" :min="numLimit(item).min"
+																	:max="numLimit(item).max" integer :step="1" input-width="68rpx"
+																	input-height="52rpx" button-size="52rpx" disabledInput
+																	@change="numChange($event, index)">
+																	<template #minus>
+																		<view class="relative w-[26rpx] h-[26rpx]" @click="reduceNumChange(item)">
+																			<text
+																				:class="{ 'text-[var(--text-color-light9)]': item.num === numLimit(item).min, 'text-[#303133]': item.num !== numLimit(item).min }"
+																				class="text-[24rpx] absolute flex items-center justify-center -left-[20rpx] -bottom-[20rpx] -right-[20rpx] -top-[20rpx] font-500 nc-iconfont nc-icon-jianV6xx"></text>
+																		</view>
+																	</template>
+																	<template #input>
+																		<input  class="text-[#303133] text-[28rpx] mx-[14rpx] w-[80rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]" type="number" @input="goodsSkuInputFn(item)" @blur="goodsSkuBlurFn($event, index)" @click.stop v-model="item.num"  />
+																	</template>
+																	<template #plus>
+																		<view class="relative w-[26rpx] h-[26rpx]"  @click="addNumChange(item)">
+																			<text
+																				:class="{ 'text-[var(--text-color-light9)]': item.num === numLimit(item).max, ' text-[#303133]': item.num !== numLimit(item).max }"
+																				class="text-[24rpx] absolute flex items-center justify-center -left-[20rpx] -bottom-[20rpx] -right-[20rpx] -top-[20rpx] font-500 nc-iconfont nc-icon-jiahaoV6xx"></text>
+																		</view>
+																	</template>
+																</u-number-box>
+															</view>
+                                                        </view>
+                                                    </view>
+                                                </u-swipe-action-item>
+                                            </view>
+                                    </block>
+
+                                </u-swipe-action>
+                            </view>
+                            <view class="bg-[#fff] pb-[10rpx] box-border rounded-[var(--rounded-big)] mt-[var(--top-m)]" v-if="invalidList.length">
+                                <view class="flex mx-[var(--pad-sidebar-m)] pt-[var(--pad-top-m)] justify-between items-center box-border font-400 text-[#303133] text-[24rpx] mb-[24rpx] leading-[30rpx]">
+                                    <view class="flex items-center text-[24rpx] text-[#333]">
+										<text>共</text>
+										<text class="text-[28rpx] text-[var(--price-text-color)]">{{ invalidList.length }}</text>
+										<text>件失效商品</text>
+									</view>
+                                    <text class="text-[var(--text-color-light6)] text-[24rpx]" @click="deleteInvalidList">清空</text>
+                                </view>
+                                <view v-for="(item, index) in invalidList" class="py-[20rpx] overflow-hidden" >
+                                    <view class="flex px-[var(--pad-sidebar-m)]">
+                                        <text class="self-center iconfont iconxuanze1 text-[34rpx] mr-[32rpx] text-[#F5F5F5] rounded-[50%] overflow-hidden shrink-0"></text>
+                                        <view class="relative w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden">
+                                            <u--image radius="var(--goods-rounded-big)" width="200rpx" height="200rpx" :src="img(item.goodsSku.sku_image_thumb_mid)" model="aspectFill">
+                                                <template #error>
+                                                    <image class="w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+                                                </template>
+                                            </u--image>
+                                            <view v-if="item.goodsSku.stock == 0 " class="absolute left-0 top-0  w-[200rpx] h-[200rpx]  leading-[200rpx] text-center " style="background-color: rgba(0,0,0,0.3);">
+                                                <text class="text-[#fff] text-[28rpx]">已售罄</text>
+                                            </view>
+                                            <view v-if="item.goodsSku.stock != 0 " class="absolute left-0 top-0  w-[200rpx] h-[200rpx]  leading-[200rpx] text-center " style="background-color: rgba(0,0,0,0.3);">
+                                                <text class="text-[#fff] text-[28rpx]">已失效</text>
+                                            </view>
+                                        </view>
+                                        <view class="flex flex-1 flex-wrap ml-[20rpx]">
+                                            <view class="w-[100%] flex flex-col items-baseline">
+                                                <view class="text-[#333] text-[28rpx] max-h-[80rpx] leading-[40rpx] font-400 multi-hidden">
+													{{ item.goods.goods_name }}
+												</view>
+                                                <view class="box-border max-w-[376rpx] mt-[10rpx] px-[14rpx] h-[36rpx] leading-[36rpx] truncate text-[var(--text-color-light6)] bg-[#F5F5F5] text-[22rpx] rounded-[20rpx]" v-if="item.goodsSku && item.goodsSku.sku_spec_format">
+                                                    {{ item.goodsSku.sku_spec_format }}
+                                                </view>
+                                            </view>
+                                            <view class="flex justify-between items-end self-end w-[100%]">
+												<view class="text-[var(--price-text-color)] price-font">
+													<text class="text-[24rpx] font-500">￥</text>
+													<text class="text-[36rpx] font-500">{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
+													<text class="text-[24rpx] font-500">.{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
+												</view>
+                                            </view>
+                                        </view>
+                                    </view>
+								</view>
+                            </view>
+                        </view>
+						<ns-goods-recommend></ns-goods-recommend>
+                    </scroll-view>
+                </view>
+            </block>
+        </view>
+		
+		<!-- 优惠明细 -->
+		<view @touchmove.prevent.stop>
+			<u-popup class="popup-type" :show="couponDetailsShow" @close="couponDetailsShow = false">
+				<view class="min-h-[200rpx] popup-common" @touchmove.prevent.stop>
+					<view class="flex justify-center items-center pt-[36rpx] pb-[56rpx] px-[26rpx] bg-[#fff] relative">
+						<text class="text-[32rpx]">优惠明细</text>
+						<text class="nc-iconfont nc-icon-guanbiV6xx text-[var(--text-color-light6)] absolute text-[32rpx] right-[26rpx]"  @click="couponDetailsShow = false"></text>
+					</view>
+					<scroll-view class="h-[360rpx]" scroll-y="true">
+						<view class="flex justify-between h-[60rpx] px-[var(--pad-sidebar-m)]">
+							<text class="text-[28rpx]">商品总额</text>
+							<text class="text-[28rpx]">￥{{total.goods_money}}</text>
+						</view>
+						<view class="flex justify-between h-[60rpx] px-[var(--pad-sidebar-m)]" v-if="Number(total.promotion_money)">
+							<text class="text-[28rpx]">满减</text>
+							<text class="text-[28rpx] text-[red]">-￥{{total.promotion_money}}</text>
+						</view>
+					</scroll-view>
+				</view>
+			</u-popup>
+		</view>
+
+        <!--  #ifdef  H5 -->
+        <view v-if="cartList.length" class="flex h-[96rpx] items-center bg-[#fff] fixed z-99999 left-0 right-0 bottom-[50px] pl-[30rpx] pr-[20rpx] box-solid mb-ios justify-between border-0 border-t-[2rpx] border-solid border-[#f6f6f6]">
+            <view class="flex items-center" @click="selectAll">
+                <text class="self-center iconfont text-color text-[34rpx] mr-[10rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden shrink-0" :class="cartList.length == checkedNum ? 'iconxuanze1' : 'bg-[#F5F5F5]'"></text>
+                <text class="font-400 text-[#303133] text-[26rpx]">全选</text>
+            </view>
+            <view class="flex items-center">
+                <view class="flex-1 flex items-center justify-between" v-if="!isEdit">
+                    <view class="mr-[20rpx]">
+						<view class="flex items-center text-[var(--price-text-color)] leading-[45rpx]">
+						    <view class="font-400 text-[#303133] text-[28rpx]">合计：</view>
+						    <text class="text-[var(--price-text-color)] price-font text-[32rpx] font-bold">
+						        ￥{{ parseFloat(total.order_money).toFixed(2) }}
+						    </text>
+						</view>
+						<view class="flex items-center justify-end mt-[6rpx]" v-if="Number(total.promotion_money)" @click="couponDetailsShow = true">
+							<text class="text-[22rpx] text-[#666]">优惠明细</text>
+							<text class="iconfont iconjiantoushang text-[#666] !text-[22rpx] ml-[4rpx] font-bold"></text>
+						</view>
+					</view>
+                    <button class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="settlement">结算</button>
+                </view>
+                <view class="flex-1 flex items-center justify-end" v-else>
+                    <button class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="deleteCartFn">删除</button>
+                </view>
+            </view>
+        </view>
+        <!--  #endif -->
+        <!--  #ifndef  H5 -->
+        <view v-if="cartList.length" class="pl-[30rpx] pr-[20rpx] flex h-[96rpx] items-center bg-[#fff] fixed z-99999 left-0 right-0 bottom-[100rpx] box-solid mb-ios justify-between border-0 border-t-[2rpx] border-solid border-[#f6f6f6]">
+            <view class="flex items-center" @click="selectAll">
+                <text class="self-center iconfont text-color text-[30rpx] mr-[20rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden shrink-0" :class="{'iconxuanze1' :cartList.length == checkedNum, 'bg-[#F5F5F5]':cartList.length != checkedNum}"></text>
+                <text class="font-400 text-[#303133] text-[26rpx]">全选</text>
+            </view>
+            <view class="flex items-center">
+                <view class="flex-1 flex items-center justify-between" v-if="!isEdit">
+					<view class="mr-[20rpx]">
+						<view class="flex items-center text-[var(--price-text-color)] leading-[45rpx]">
+						    <view class="font-400 text-[#303133] text-[28rpx]">合计：</view>
+						    <text class="text-[var(--price-text-color)] price-font text-[32rpx] font-bold">
+						        ￥{{ parseFloat(total.order_money).toFixed(2) }}
+						    </text>
+						</view>
+						<view class="flex items-center justify-end mt-[6rpx]" v-if="total.promotion_money" @click="couponDetailsShow = true">
+							<text class="text-[22rpx] text-[#666]">优惠明细</text>
+							<text class="iconfont iconjiantoushang text-[#666] !text-[22rpx] ml-[4rpx] font-bold"></text>
+						</view>
+					</view>
+
+                    <!-- #ifdef H5 -->
+                    <button class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="settlement">结算</button>
+                    <!-- #endif -->
+
+                    <!-- #ifdef MP-WEIXIN -->
+                    <button v-if="isBindMobile && info && !info.mobile" class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">结算</button>
+                    <button v-else class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="settlement">结算</button>
+                    <!-- #endif -->
+
+                </view>
+                <view class="flex-1 flex items-center justify-end" v-else>
+                    <button class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="deleteCartFn">删除</button>
+                </view>
+            </view>
+        </view>
+        <!--  #endif -->
+		<loading-page :loading="loading"></loading-page>
+		<ns-goods-manjian ref="manjianShowRef"></ns-goods-manjian>
+        <tabbar />
+        <!-- 强制绑定手机号 -->
+		<bind-mobile ref="bindMobileRef" />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch,nextTick } from 'vue'
+import useMemberStore from '@/stores/member'
+import { useLogin } from '@/hooks/useLogin'
+import { onShow } from '@dcloudio/uni-app'
+import { img, redirect, getToken } from '@/utils/common'
+import useCartStore from '@/addon/shop/stores/cart'
+import { getCartGoodsList, getCartCalculate } from '@/addon/shop/api/cart'
+import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
+import {t} from "@/locale";
+import {useGoods} from '@/addon/shop/hooks/useGoods'
+import nsGoodsManjian from '@/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue';
+import nsGoodsRecommend from '@/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue';
+
+const diyGoods = useGoods();
+const memberStore = useMemberStore()
+const info = computed(() => memberStore.info)
+const loading = ref(true)
+const optionLoading = ref(false)
+const total = ref({
+	goods_money: 0, //商品金额
+	order_money: 0, //订单金额
+	promotion_money: 0 //优惠金额
+})
+const cartList = ref<object[]>([])
+const invalidList = ref<object[]>([]) //  失效商品：已下架、已删除
+const isEdit = ref(false)
+const querOne = ref(true)
+const cartStore = useCartStore();
+const manjianShowRef: any = ref(null); //满减送
+const couponDetailsShow: any = ref(false); //优惠明细
+
+const getCartGoodsListFn = () => {
+    getCartGoodsList({}).then(({ data }) => {
+        cartList.value = []
+        invalidList.value = []
+        data.forEach(item => {
+            item.checked = false
+            if (item.goodsSku) {
+                if (item.goods.status && item.goods.delete_time == 0) {
+                    if (item.goodsSku.stock) {
+                        if (item.num > item.goodsSku.stock) item.num = item.goodsSku.stock;
+                        cartList.value.push(item)
+                    } else {
+                        // 库存为0 时，移动到售罄商品
+                        invalidList.value.push(item)
+                    }
+                } else {
+                    invalidList.value.push(item)
+                }
+            }
+        })
+		
+        selectAll();
+		cartCalculateFn();
+		loading.value = false
+        if (querOne.value) querOne.value = false
+    }).catch((err) => {
+        if (err.code == 401) {
+            cartList.value = []
+            invalidList.value = []
+            loading.value = false
+        }
+    })
+}
+
+onShow(() => {
+    getCartGoodsListFn()
+    cartStore.getList();
+})
+
+const goodsSkuInputFn = (data)=>{
+	setTimeout(() => {
+		if(!data.num || data.num <= numLimit(data).min ){
+			data.num = numLimit(data).min;
+		}
+		if(data.num >= numLimit(data).max){
+			data.num = numLimit(data).max;
+		}
+		uni.$u.debounce((event: any) => {
+			cartStore.increase({
+				id: data.id,
+				goods_id: data.goods_id,
+				sku_id: data.sku_id,
+				stock: data.goodsSku.stock,
+				sale_price: data.goodsSku.sale_price,
+				num: Number(data.num)
+			}, 0);
+		}, 500)
+	},0)
+}
+const goodsSkuBlurFn = (event, index)=>{
+	setTimeout(() => {
+		const data: any = cartList.value[index]
+		if(!data.num || data.num <= numLimit(data).min ){
+			data.num = numLimit(data).min;
+		}
+		if(data.num >= numLimit(data).max){
+			data.num = numLimit(data).max;
+		}
+
+		uni.$u.debounce((event: any) => {
+			cartStore.increase({
+				id: data.id,
+				goods_id: data.goods_id,
+				sku_id: data.sku_id,
+				stock: data.goodsSku.stock,
+				sale_price: data.goodsSku.sale_price,
+				num: Number(data.num)
+			}, 0,cartCalculateFn());
+		}, 500)
+	},0)
+}
+
+const checkedNum = computed(() => {
+	let num = 0
+	cartList.value.forEach((item: any) => {
+		item.checked && (num += 1)
+	})
+	return num
+})
+
+const manjianOpenFn = (data:any) =>{
+	let obj = {};
+	obj.condition_type = data.condition_type;
+	obj.rule_json = data.rule_json;
+	obj.name = data.manjian_name;
+	manjianShowRef.value.open(obj);
+}
+
+let isLoadCalculate = false;
+const cartCalculateFn = () =>{
+	let calculateArr: Object = [];
+	cartList.value.forEach((item:any) => {
+	    if (item.checked && item.goodsSku) {
+			let obj = {};
+			obj.num = item.num;
+			obj.sku_id = item.sku_id;
+			calculateArr.push(obj);
+	    }
+	})
+	
+	if(!calculateArr.length){
+		total.value.order_money = 0
+		return false;
+	}
+	
+	if(isLoadCalculate)return false;
+	isLoadCalculate = true;
+	
+	getCartCalculate({sku_ids: calculateArr}).then(({ data }) => {
+		total.value.goods_money = data.goods_money;
+		total.value.order_money = data.order_money;
+		total.value.promotion_money = data.promotion_money;
+		cartList.value.forEach((item,index)=>{
+			for(let subIndex = 0; subIndex < data.match_list.length; subIndex++){
+				if(item.goods_id == data.match_list[subIndex].goods_id && item.sku_id == data.match_list[subIndex].sku_id && item.manjian_info && Object.keys(item.manjian_info).length){
+					item.manjian_info.is_show = true;
+					let subTempShowNum = 0;
+					item.manjian_info.rule_json.forEach((threeItem, threeIndex)=>{
+						if(threeIndex == data.match_list[subIndex].level){
+							threeItem.is_show = true;
+							subTempShowNum++;
+						}else{
+							threeItem.is_show = false;
+						}
+					})
+					if(subTempShowNum == 0){
+						item.manjian_info.is_show = false;
+					}else{
+						item.manjian_info.is_show = true;
+					}
+					return;
+				}
+			}
+			if(item.manjian_info && Object.keys(item.manjian_info).length){
+				item.manjian_info.is_show = false;
+			}
+		})	
+		isLoadCalculate = false;
+	})
+}
+
+const toLogin = () => {
+	useLogin().setLoginBack({ url: '/addon/shop/pages/goods/cart' })
+}
+
+const toDetail = (data: any) => {
+    redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
+}
+
+const numChange = (event: any, index: any) => {
+	uni.$u.debounce((event: any) => {
+		const data: any = cartList.value[index]
+		cartStore.increase({
+			id: data.id,
+			goods_id: data.goods_id,
+			sku_id: data.sku_id,
+			stock: data.goodsSku.stock,
+			sale_price: data.goodsSku.sale_price,
+			num: data.num
+		}, 0, cartCalculateFn());
+	}, 500)
+}
+const addNumChange = (data: any) => {
+	if(data.num >= data.goods.stock){
+		uni.showToast({ title: "商品库存不足", icon: 'none' });
+		return ;
+	}
+	
+	if(data.goods.is_limit){
+		let tips = `该商品单次限购${data.goods.max_buy}件`;
+		if(data.goods.limit_type != 1){ //单次限购
+			tips = `该商品每人限购${data.goods.max_buy}件`;
+		}
+		if(data.num >= data.goods.max_buy){
+			uni.showToast({ title: tips, icon: 'none' })
+		}
+	}
+}
+
+const reduceNumChange = (data: any) => {
+	if(data.goods.is_limit && data.goods.min_buy){
+		let tips = `该商品起购${data.goods.min_buy}件`;	
+		if(data.num <= data.goods.min_buy){
+			uni.showToast({ title: tips, icon: 'none' })
+		}
+	}
+}
+
+const numLimit = (data: any) => {
+	let obj = {
+		min: 1,
+		max: data.goodsSku.stock || 1
+	};
+
+	// 限购 - 是否开启限购
+	if(data.goods.is_limit){
+		if(data.goods.max_buy){
+			let max_buy = 0;
+			max_buy = data.goods.max_buy;
+
+			if(max_buy > data.goods.stock){
+				obj.max = data.goods.stock
+			}else if(max_buy <= data.goods.stock){
+				obj.max = max_buy;
+			}
+		}
+	}
+
+	// 起售
+	if(data.goods.min_buy > 0){
+		obj.min = data.goods.min_buy;
+	}
+	return obj;
+}
+
+const cartOptions = ref([
+    {
+        text: t('delete'),
+        style: {
+            backgroundColor: '#EF000C', 
+			width: '100rpx',
+			height:'100%',
+			borderRadius: '10rpx'	   
+        }
+    }
+]);
+
+
+const swipeActive = ref()
+const swipeClick = (index:any,item:any) => {
+	if (optionLoading.value) return
+	optionLoading.value = true
+	cartStore.delete(item.id, () => {
+		cartList.value.splice(index, 1)
+		nextTick(()=>{if(swipeActive.value)swipeActive.value.closeOther() })
+		cartCalculateFn();
+		optionLoading.value = false
+	})
+}
+/**
+ * 选择单个商品
+ */
+const selectOnlyGoods = (data:any = {}) => {
+	data.checked = !data.checked
+	cartCalculateFn();
+}
+
+/**
+ * 全选
+ */
+const selectAll = () => {
+	const checked = cartList.value.length == checkedNum.value ? false : true
+	cartList.value.forEach((item: any) => {
+		item.checked = checked
+	})
+	cartCalculateFn();
+}
+
+ //强制绑定手机号
+const bindMobileRef: any = ref(null)
+const isBindMobile = ref(uni.getStorageSync('isbindmobile'))
+
+/**
+ * 结算
+ */
+const settlement = () => {
+
+    // #ifdef H5
+    if(uni.getStorageSync('isbindmobile')){
+        bindMobileRef.value.open()
+        return false
+    }
+    // #endif
+
+	if (!checkedNum.value) {
+		uni.showToast({ title: '还没有选择商品', icon: 'none' })
+		return
+	}
+	const ids: any = []
+	cartList.value.forEach((item: any) => {
+		if (item.checked) ids.push(item.id)
+	})
+
+	uni.setStorage({
+		key: 'orderCreateData',
+		data: {
+			cart_ids: ids
+		},
+		success() {
+			redirect({ url: '/addon/shop/pages/order/payment' })
+		}
+	})
+}
+
+/**
+ * 删除
+ */
+const deleteCartFn = () => {
+	if (!checkedNum.value) {
+		uni.showToast({ title: '还没有选择商品', icon: 'none' })
+		return
+	}
+	if (optionLoading.value) return
+	optionLoading.value = true
+
+	const ids: any = []
+	cartList.value.forEach((item: any) => {
+		if (item.checked) ids.push(item.id)
+	})
+
+	cartStore.delete(ids, () => {
+		getCartGoodsListFn()
+		optionLoading.value = false
+	})
+}
+/**
+ * 清空无效商品
+ */
+const deleteInvalidList = ()=>{
+	if (optionLoading.value) return
+	optionLoading.value = true
+	const ids = invalidList.value.map((el: any)=>el.id)
+
+	cartStore.delete(ids, () => {
+		getCartGoodsListFn()
+		optionLoading.value = false
+	})
+	invalidList.value = []
+}
+
+// 商品价格
+const goodsPrice = (data:any) => {
+    let price = "0.00";
+    if (data.goods.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
+        price = data.goodsSku.member_price ? data.goodsSku.member_price : data.goodsSku.price // 会员价
+    } else {
+        price = data.goodsSku.price
+    }
+    return price;
+}
+</script>
+<style lang="scss" scoped>
+@import '@/addon/shop/styles/common.scss';
+.remove-border {
+	&::after {
+		border: none;
+	}
+}
+:deep(uni-page) {
+	background: var(--page-bg-color);
+}
+
+uni-page-body {
+	height: 100%;
+}
+
+.text-color {
+	color: var(--primary-color);
+}
+
+.bg-color {
+	background-color: var(--primary-color);
+}
+
+:deep(.tab-bar-placeholder) {
+	display: none !important;
+}
+
+:deep(.u-tabbar__placeholder) {
+	display: none !important;
+}
+
+/*  #ifdef  H5  */
+.scroll-height {
+	height: calc(100vh - 100rpx - 50px - constant(safe-area-inset-bottom));
+	height: calc(100vh - 100rpx - 50px - env(safe-area-inset-bottom));
+}
+
+/*  #endif  */
+/*  #ifndef  H5  */
+.scroll-height {
+	height: calc(100vh - 200rpx - constant(safe-area-inset-bottom));
+	height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
+}
+/*  #endif  */
+
+.text-ellipsis{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+:deep(.u-swipe-action-item__right){
+	padding: 2rpx; 
+}
+:deep(.u-swipe-action-item__right__button__wrapper){
+    padding:0 10rpx !important;
+}
+:deep(.u-swipe-action-item__right__button__wrapper__text){
+    font-size:24rpx !important;
+}
+
+:deep(.u-tabbar .u-tabbar__content){
+	z-index: 99999 !important;
+}
+</style>
diff --git a/src/addon/shop/pages/goods/category.vue b/src/addon/shop/pages/goods/category.vue
new file mode 100644
index 0000000..a2cf00d
--- /dev/null
+++ b/src/addon/shop/pages/goods/category.vue
@@ -0,0 +1,133 @@
+<template>
+	<view :style="themeColor()">
+		<category-template-one-one class="category" v-if="config.level===1 && config.template === 'style-1'" :categoryId="categoryId" :config="config" />
+		<category-template-two-one v-if="config.level===2 && config.template === 'style-1'" :categoryId="categoryId" :config="config" />
+		<category-template-two-two class="category" v-if="config.level===2 && config.template === 'style-2'" :categoryId="categoryId" :config="config" />
+	</view>
+</template>
+<script setup lang="ts">
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { ref } from 'vue';
+import categoryTemplateTwoOne from '@/addon/shop/pages/goods/components/category-template-two-one.vue';
+import categoryTemplateOneOne from '@/addon/shop/pages/goods/components/category-template-one-one.vue';
+import categoryTemplateTwoTwo from '@/addon/shop/pages/goods/components/category-template-two-two.vue';
+import { getGoodsCategoryConfig } from '@/addon/shop/api/goods';
+import useCartStore from '@/addon/shop/stores/cart'
+
+const cartStore = useCartStore();
+const config: any = ref({})
+const categoryId = ref(0)
+
+const getGoodsCategoryConfigFn = () => {
+	getGoodsCategoryConfig().then(res => {
+		config.value = res.data
+        uni.setNavigationBarTitle({
+            title: config.value.page_title
+        });
+	})
+}
+
+onLoad((options:any) => {
+    categoryId.value = options.category_id || 0;
+    getGoodsCategoryConfigFn()
+});
+
+onShow(() => {
+	// 查询购物车列表
+	cartStore.getList();
+})
+
+</script>
+<style>
+
+/*  #ifdef  H5  */
+:deep(.category .detail .mescroll-body) {
+	padding-bottom: calc(50px  + constant(safe-area-inset-bottom)) !important;
+	padding-bottom: calc(50px  + env(safe-area-inset-bottom)) !important;
+}
+
+:deep(.category .cart .mescroll-body){
+	padding-bottom: calc(100rpx + 50px  + constant(safe-area-inset-bottom)) !important;
+	padding-bottom: calc(100rpx + 50px  + env(safe-area-inset-bottom)) !important;
+}
+/*  #endif  */
+/*  #ifndef  H5  */
+ .category .detail .mescroll-body {
+	padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)) !important;
+	padding-bottom: calc(100rpx + env(safe-area-inset-bottom)) !important;
+}
+
+.category .cart .mescroll-body {
+	padding-bottom: calc(200rpx + constant(safe-area-inset-bottom)) !important;
+	padding-bottom: calc(200rpx + env(safe-area-inset-bottom)) !important;
+}
+/*
+.category .labelPopup :deep(.u-fade-enter-active) {
+	top: 92rpx !important;
+	left: 166rpx !important;
+	z-index: 8 !important;
+	
+	
+}
+.category .labelPopup :deep(.u-slide-down-enter-active){
+	top: 92rpx !important;
+	left: 165rpx !important;
+	z-index: 8 !important;
+}
+.category .labelPopup.active :deep(.u-fade-enter-active) {
+	top: 190rpx !important;
+	
+}
+.category .labelPopup.active :deep(.u-slide-down-enter-active){
+	top: 190rpx !important;
+}
+.category .labelPopup :deep(.u-fade-enter-to){
+	top: 92rpx !important;
+	left: 166rpx !important;
+	z-index: 8 !important;
+}
+.category .labelPopup :deep(.u-slide-down-leave-to){
+	top: 92rpx !important;
+	left: 165rpx !important;
+	z-index: 8 !important;
+} */
+.category .labelPopup :deep(.u-transition) {
+	top: 96rpx !important;
+	left: 170rpx !important;
+	z-index: 8 !important;
+	&:nth-child(2){
+		left: 168rpx !important;
+	}
+}
+.category .labelPopup.active :deep(.u-transition) {
+	top: 190rpx !important;
+}
+/*  #endif  */
+
+</style>
+<style lang="scss" scoped>
+:deep(.mescroll-upwarp) {
+	box-sizing: border-box;
+	padding-left: 182rpx;
+}
+
+:deep(.tab-bar-placeholder) {
+	display: none !important;
+}
+
+:deep(.u-tabbar__placeholder) {
+	display: none !important;
+}
+button::after{
+	border: 0 !important;
+}
+
+:deep(.part .mescroll-empty){
+	width: 542rpx;
+	height: 542rpx;
+	margin-top: 0;
+	margin-left: 0;
+	margin-right: 0;
+	padding-top: 50rpx;
+}
+</style>
diff --git a/src/addon/shop/pages/goods/collect.vue b/src/addon/shop/pages/goods/collect.vue
new file mode 100644
index 0000000..ac1ed65
--- /dev/null
+++ b/src/addon/shop/pages/goods/collect.vue
@@ -0,0 +1,199 @@
+<template>
+    <view :style="themeColor()">
+        <view class="bg-page min-h-screen overflow-hidden ">
+            <mescroll-body ref="mescrollRef" top="0"  @init="mescrollInit" :down="{ use: false }" @up="getCollectListFn">
+                <view class="py-[var(--top-m)] sidebar-margin" v-if="goodsList.length">
+                    <view class="bg-[#fff] pb-[10rpx] box-border rounded-[var(--rounded-big)]" >
+                        <view class="flex mx-[var(--rounded-big)] pt-[var(--pad-top-m)] justify-between items-center box-border font-400 text-[24rpx] mb-[24rpx] leading-[30rpx]">
+                            <view class="flex items-baseline text-[24rpx] text-[#333]">
+                                <text>共</text>
+                                <text class="text-[32rpx] mx-[2rpx] text-[var(--price-text-color)]">{{ goodsList.length }}</text>
+                                <text>件商品</text>
+                            </view>
+                            <text @click="isEdit = !isEdit" class="text-[var(--text-color-light6)] text-[24rpx]">{{ isEdit ? '完成' : '管理' }}</text>
+                        </view>
+                        <u-swipe-action ref="swipeActive">
+                            <block v-for="(item, index) in goodsList" :key="index">
+                                <view class="py-[20rpx] overflow-hidden w-full">
+                                    <u-swipe-action-item :options="cartOptions" @click="swipeClick(item)">
+                                        <view class="flex px-[var(--pad-sidebar-m)]">
+                                            <view class="self-center w-[58rpx] h-[60rpx] flex items-center" v-if="isEdit" @click.stop="item.checked = !item.checked">
+                                                <text class=" iconfont text-primary text-[34rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden shrink-0"
+                                                    :class="{ 'iconxuanze1':item.checked,'bg-[#F5F5F5]':!item.checked}">
+                                                </text>
+                                            </view>
+                                            <view  class="flex flex-1" @click="toDetail(item)">
+                                                <view class="relative w-[200rpx] h-[200rpx] flex items-center justify-center rounded-[var(--goods-rounded-big)] overflow-hidden">
+                                                    <u--image radius="var(--goods-rounded-big)" width="200rpx" height="200rpx" :src="img(item.goods_cover_thumb_mid||'')" model="aspectFill">
+                                                        <template #error>
+                                                            <image class="w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+                                                        </template>
+                                                    </u--image>
+                                                    <view v-if="item.status == 0 " class="absolute left-0 top-0  w-[200rpx] h-[200rpx]  leading-[200rpx] text-center " style="background-color: rgba(0,0,0,0.3);">
+                                                        <text class="text-[#fff] text-[28rpx]">已失效</text>
+                                                    </view>
+                                                </view>
+                                                <view class="flex flex-1 flex-wrap ml-[20rpx]">
+                                                    <view class="w-[100%] flex flex-col items-baseline">
+                                                        <view class="text-[#333] text-[28rpx] max-h-[80rpx] leading-[40rpx] multi-hidden font-400">
+                                                            {{ item.goods_name }}
+                                                        </view>
+                                                        <view class="box-border max-w-[376rpx] mt-[10rpx] px-[14rpx] h-[36rpx] leading-[36rpx] truncate text-[var(--text-color-light6)] bg-[#F5F5F5] text-[22rpx] rounded-[20rpx]" v-if="item.sku_name">
+                                                            {{ item.sku_name }}
+                                                        </view>
+                                                    </view>
+                                                    <view class="flex justify-between items-end self-end mt-[10rpx] w-[100%]">
+                                                        <view class="text-[var(--price-text-color)] price-font truncate max-w-[200rpx]">
+                                                            <text class="text-[24rpx] font-500">￥</text>
+                                                            <text class="text-[40rpx] font-500">{{ parseFloat(item.price).toFixed(2).split('.')[0] }}</text>
+                                                            <text class="text-[24rpx] font-500">.{{ parseFloat(item.price).toFixed(2).split('.')[1] }}</text>
+                                                        </view>
+                                                    </view>
+                                                </view>
+                                            </view>
+                                        </view>
+                                    </u-swipe-action-item>
+                                </view>
+                            </block>
+                        </u-swipe-action>
+                    </view>
+                </view>
+                <mescroll-empty v-if="!goodsList.length && loading" :option="{tip : '暂无收藏的商品'}"></mescroll-empty>
+            </mescroll-body>
+            <view v-if="goodsList.length && isEdit" class="flex h-[96rpx] items-center bg-[#fff] fixed left-0 right-0 bottom-0 pl-[30rpx] pr-[20rpx] box-solid mb-ios justify-between">
+                <view class="flex items-center" @click="selectAll">
+                    <text class="self-center iconfont text-primary text-[34rpx] mr-[10rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden flex-shrink-0" :class="{'iconxuanze1': goodsList.length == checkedNum, 'bg-color': goodsList.length != checkedNum }"></text>
+                    <text class="font-400 text-[#303133] text-[26rpx]">全选</text>
+                </view>
+                <button class="w-[180rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="deleteCollectFn">取消收藏</button>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed,} from 'vue'
+import {t} from "@/locale";
+import { img, redirect } from '@/utils/common'
+import { getCollectList, cancelCollect } from '@/addon/shop/api/goods';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+
+const loading = ref<boolean>(false);
+const optionLoading = ref(false)
+const goodsList = ref<Array<any>>([]);
+const isEdit = ref(false)
+
+
+interface mescrollStructure {
+	num: number,
+	size: number,
+	endSuccess: Function,
+	[propName: string]: any
+}
+
+const getCollectListFn = (mescroll: mescrollStructure) => {
+	loading.value = false
+    let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size
+	};
+	getCollectList(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>);
+		//设置列表数据
+		if (Number(mescroll.num) === 1) {
+			goodsList.value = []; //如果是第一页需手动制空列表
+		}
+        newArr = newArr.map((item: any) =>{
+            item.checked = false
+            return item
+        })
+		goodsList.value = goodsList.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+		loading.value = true;
+	}).catch(() => {
+		loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+const cartOptions = ref([
+    {
+        text: t('delete'),
+        style: {
+            backgroundColor: '#EF000C',
+			width: '100rpx',
+			height:'100%',
+			borderRadius: '10rpx'
+        }
+    }
+]);
+
+// 取消单个收藏
+const swipeClick = (data: any) => {
+    if (optionLoading.value) return
+	optionLoading.value = true
+    cancelCollect({goods_ids: [data.goods_id]}).then((res: any) => {
+        optionLoading.value = false
+        getMescroll().resetUpScroll();
+    })
+}
+//取消全部收藏
+const  deleteCollectFn = () => {
+    if (!checkedNum.value) {
+		uni.showToast({ title: '请先选择收藏的商品', icon: 'none' })
+		return
+	}
+    if (optionLoading.value) return
+	optionLoading.value = true
+    const ids: any = []
+	goodsList.value.forEach((item: any) => {
+		if (item.checked) ids.push(item.goods_id)
+	})
+    cancelCollect({goods_ids: ids}).then((res: any) => {
+        optionLoading.value = false
+        getMescroll().resetUpScroll();
+    })
+}
+
+
+// 选中数量
+const checkedNum = computed(() => {
+	let num = 0
+	goodsList.value.forEach((item: any) => {
+		item.checked && (num += 1)
+	})
+	return num
+})
+
+/**
+ * 全选
+ */
+ const selectAll = () => {
+	const checked = goodsList.value.length == checkedNum.value ? false : true
+	goodsList.value.forEach((item: any) => {
+		item.checked = checked
+	})
+}
+const toDetail = (data: any) => {
+    redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.goods_id } })
+}
+</script>
+
+<style lang="scss" scoped>
+.bg-color{
+	background-color: #f5f5f5;
+}
+:deep(.u-swipe-action-item__right){
+	padding: 2rpx; 
+}
+:deep(.u-swipe-action-item__right__button__wrapper){
+    padding:0 10rpx !important;
+}
+:deep(.u-swipe-action-item__right__button__wrapper__text){
+    font-size:24rpx !important;
+}
+</style>
diff --git a/src/addon/shop/pages/goods/components/add-cart-popup.vue b/src/addon/shop/pages/goods/components/add-cart-popup.vue
new file mode 100644
index 0000000..8abf7be
--- /dev/null
+++ b/src/addon/shop/pages/goods/components/add-cart-popup.vue
@@ -0,0 +1,374 @@
+<template>
+	<view @touchmove.prevent.stop>
+		<u-popup :show="goodsSkuPop" @close="closeFn" mode="bottom">
+			<view v-if="Object.keys(goodsDetail).length"  @touchmove.prevent.stop class="rounded-t-[20rpx] overflow-hidden bg-[#fff] py-[32rpx] relative">
+				<view class="flex px-[32rpx] mb-[58rpx]">
+					<u--image width="180rpx" height="180rpx" :radius="'var(--goods-rounded-big)'" :src="img(detail.sku_image)" model="aspectFill">
+						<template #error>
+							<image class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+						</template>
+					</u--image>
+
+					<view class="flex flex-1 flex-col justify-between ml-[20rpx] py-[10rpx]">
+						<view class="w-[100%]">
+							<view class=" text-[var(--price-text-color)]  flex items-baseline">
+								<text class="text-[32rpx] font-bold price-font mr-[4rpx]">￥</text>
+								<text class="text-[48rpx] price-font">{{ parseFloat(goodsPrice(detail)).toFixed(2).split('.')[0] }}</text>
+								<text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice(detail)).toFixed(2).split('.')[1] }}</text>
+								<image class="h-[24rpx] ml-[6rpx] max-w-[44rpx]" v-if="priceType(detail) == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+							</view>
+							<view class="text-[26rpx] leading-[32rpx] text-[#303133] mt-[12rpx]">库存{{ detail.stock }}{{ goodsDetail.goods.unit }}</view>
+						</view>
+						<view class="w-[100%] text-[26rpx] leading-[30rpx] text-[var(--text-color-light6)] multi-hidden max-h-[60rpx]" v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length">已选规格：{{ detail.sku_spec_format }}</view>
+					</view>
+				</view>
+				<scroll-view class="h-[500rpx] box-border px-[32rpx] mb-[30rpx]" scroll-y="true">
+					<view :class="{'mt-[36rpx]': 0 != index }" v-for="(item, index) in goodsDetail.goodsSpec" :key="index">
+						<view class="text-[26rpx] leading-[36rpx] mb-[24rpx]">{{ item.spec_name }}</view>
+						<view class="flex flex-wrap">
+							<view
+								class="box-border bg-[#f2f2f2] text-[24rpx] px-[44rpx] text-center h-[56rpx] leading-[52rpx] mr-[20rpx] mb-[20rpx] border-1 border-solid rounded-[50rpx] border-[#f2f2f2]"
+								:class="{'!border-[var(--primary-color)] text-[var(--primary-color)] !bg-[var(--primary-color-light)]': subItem.selected}"
+								v-for="(subItem, subIndex) in item.values" :key="subIndex" @click="change(subItem, index)">
+								{{ subItem.name }}
+							</view>
+						</view>
+					</view>
+					<view class="flex justify-between items-center mt-[8rpx]">
+						<view class="text-[26rpx]">购买数量</view>
+						<text v-if="maxBuyShow > 0 && minBuyShow > 1" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">
+							({{ minBuyShow }}{{ goodsDetail.goods.unit }}起售，限购{{ maxBuyShow }}{{ goodsDetail.goods.unit }})
+						</text>
+						<text v-else-if="maxBuyShow > 0" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">(限购{{ maxBuyShow }}{{ goodsDetail.goods.unit }})</text>
+						<text v-else-if="minBuyShow > 1" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">({{ minBuyShow }}{{ goodsDetail.goods.unit }}起售)</text>
+						<u-number-box
+							v-if="cartList['goods_' + detail.goods_id] && cartList['goods_' + detail.goods_id]['sku_' + detail.sku_id]"
+							v-model="buyNum" :min="minBuy" :max="maxBuy" integer :step="1" input-width="98rpx"
+							input-height="54rpx">
+							<template #minus>
+								<view class="relative w-[34rpx] h-[34rpx]" @click="reduceNumChange()">
+									<text class="text-[34rpx] nc-iconfont nc-icon-jianV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum <= minBuy }"></text>
+								</view>
+							</template>
+							<template #input>
+								<input class="text-[#303133] text-[28rpx] mx-[10rpx] w-[80rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]" type="number" @input="goodsSkuInputFn" @blur="goodsSkuBlurFn" v-model="buyNum"  />
+							</template>
+							<template #plus>
+								<view class="relative w-[34rpx] h-[34rpx]" @click="addNumChange()">
+									<text class="text-[34rpx] nc-iconfont nc-icon-jiahaoV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum >= maxBuy }"></text>
+								</view>
+							</template>
+						</u-number-box>
+						<u-number-box v-else v-model="buyNum" :min="minBuy" :max="maxBuy" integer :step="1" input-width="98rpx" input-height="54rpx">
+							<template #minus>
+								<view class="relative w-[34rpx] h-[34rpx]" @click="reduceNumChange()">
+									<text class="text-[34rpx] nc-iconfont nc-icon-jianV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum <= minBuy }"></text>
+								</view>
+							</template>
+							<template #input>
+								<input class="text-[#303133] text-[28rpx] mx-[10rpx] w-[80rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]" type="number" @input="goodsSkuInputFn" @blur="goodsSkuBlurFn" v-model="buyNum"  />
+							</template>
+							<template #plus>
+								<view class="relative w-[34rpx] h-[34rpx]" @click="addNumChange()">
+									<text class="text-[34rpx] nc-iconfont nc-icon-jiahaoV6xx font-500 absolute flex items-center justify-center -left-[8rpx] -bottom-[8rpx] -right-[8rpx] -top-[8rpx]" :class="{ '!text-[var(--text-color-light9)]': buyNum >= maxBuy }"></text>
+								</view>
+							</template>
+						</u-number-box>
+					</view>
+				</scroll-view>
+				<view class="px-[20rpx]">
+					<button v-if="detail.stock > 0" class="!h-[80rpx] font-500 primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx]" type="primary" @click="save">确定</button>
+					<button v-else class="!h-[80rpx] leading-[80rpx] font-500 text-[26rpx] text-[#fff] bg-[#ccc] rounded-[50rpx]">已售罄</button>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, toRaw } from 'vue';
+import { img, redirect, getToken } from '@/utils/common';
+import { getGoodsSku } from '@/addon/shop/api/goods';
+import useCartStore from '@/addon/shop/stores/cart'
+import { cloneDeep } from 'lodash-es'
+
+const cartStore = useCartStore();
+const cartList = computed(() => cartStore.cartList)
+
+const goodsSkuPop = ref(false);
+const currSpec: any = ref({
+	skuId: "",
+	name: []
+})
+const info: any = ref({})//获取原始数据
+const detail:any = ref({})//展示数据
+const buyNum = ref(1)
+
+const maxBuy = ref(0); // 限购
+const minBuy = ref(0); // 起售
+const maxBuyShow = ref(0); // 限购，只展示
+const minBuyShow = ref(0); // 起售，只展示
+
+const getGoodsSkuFn = (sku_id: any) => {
+	getGoodsSku(sku_id).then((res: any) => {
+		info.value = res.data
+		// 当前详情内容
+		currSpec.value.sku_id = sku_id
+		if (info.value.skuList && Object.keys(info.value.skuList).length) {
+			info.value.skuList.forEach((item: any) => {
+				if (item.sku_id == sku_id) {
+					detail.value = item;
+					currSpec.value.name = item.sku_spec_format.split(",");
+				}
+			})
+		}
+		goodsSkuPop.value = true;
+
+	})
+}
+
+const goodsSkuInputFn = ()=>{
+	setTimeout(() => {
+		if(!buyNum.value || buyNum.value <= minBuy.value ){
+			buyNum.value = minBuy.value || 1;
+		}
+		if(buyNum.value >= maxBuy.value){
+			buyNum.value = maxBuy.value;
+		}
+		// 起售大于库存，初始值也应该是零
+		if(minBuy.value > buyNum.value){
+			buyNum.value = 0;
+		}
+	},0)
+}
+const goodsSkuBlurFn = ()=>{
+	setTimeout(() => {
+		if(!buyNum.value || buyNum.value <= minBuy.value ){
+			buyNum.value = minBuy.value || 1;
+		}
+		if(buyNum.value >= maxBuy.value){
+			buyNum.value = maxBuy.value;
+		}
+		
+		// 起售大于库存，初始值也应该是零
+		if(minBuy.value > buyNum.value){
+			buyNum.value = 0;
+			uni.showToast({
+			    title: '库存数量小于起购数量',
+			    icon: 'none'
+			});
+		}
+	},0)
+}
+
+const open = (sku_id: any) => {
+	getGoodsSkuFn(sku_id)
+}
+
+const closeFn = () => {
+	goodsSkuPop.value = false
+}
+
+const goodsDetail = computed(() => {
+	let data = cloneDeep(info.value);
+
+	// 重组数据结构
+	if (Object.keys(data).length) {
+
+		if (!Object.keys(currSpec.value.name).length) currSpec.value.name = data.sku_spec_format.split(",");
+
+		data.goodsSpec.forEach((item: any, index: any) => {
+			let specName = item.spec_values.split(",");
+			item.values = [];
+			specName.forEach((specItem: any, specIndex: any) => {
+				item.values[specIndex] = {};
+				item.values[specIndex].name = specItem;
+				item.values[specIndex].selected = false;
+				item.values[specIndex].disabled = false;
+
+				// 选中规格
+				currSpec.value.name.forEach((currSpecItem: any, currSpecIndex: any) => {
+					if (currSpecIndex == index && currSpecItem == specItem) {
+						item.values[specIndex].selected = true;
+					}
+				})
+			})
+		})
+		getSkuId();
+		
+		// 当前详情内容
+		if (data.skuList && Object.keys(data.skuList).length) {
+			data.skuList.forEach((item: any) => {
+				if (item.sku_id == currSpec.value.skuId) {
+					detail.value = item;
+				}
+			})
+		}
+	}
+	/************************** 限购-start **************************/
+	maxBuy.value = detail.value.stock
+	// 限购 - 是否开启限购
+	if(data.goods.is_limit){
+		if(data.goods && data.goods.max_buy){
+			let max_buy = 0;
+			if(data.goods.limit_type == 1){ //单次限购
+				max_buy = data.goods.max_buy;
+			}else{ // 单人限购
+				let buyVal = data.goods.max_buy - (data.has_buy||0);
+				max_buy = buyVal > 0 ? buyVal : 0;
+			}
+			
+			if(max_buy > detail.value.stock){
+				maxBuy.value = detail.value.stock
+			}else if(max_buy <= detail.value.stock){
+				maxBuy.value = max_buy;
+			}
+		}
+		// 仅用于展示
+		maxBuyShow.value = data.goods.max_buy; // 限购
+		// 限购开启且最大购买变为零时，初始值也应该是零
+		if(maxBuy.value == 0){
+			buyNum.value = 0;
+		}
+	}
+	// 起售
+	minBuy.value = data.goods.min_buy;
+	buyNum.value = minBuy.value > 0 ? data.goods.min_buy : 1;
+	// 仅用于展示
+	minBuyShow.value = data.goods.min_buy;
+	// 起售大于库存，初始值也应该是零
+	if(minBuy.value > detail.value.stock){
+		buyNum.value = 0;
+	}
+	/************************** 限购-end **************************/
+	return data;
+})
+
+watch(
+	() => detail.value,
+	(newValue, oldValue) => {
+		if (cartList.value['goods_' + detail.value.goods_id] && cartList.value['goods_' + detail.value.goods_id]['sku_' + detail.value.sku_id]) {
+			buyNum.value = toRaw(cartList.value['goods_' + detail.value.goods_id]['sku_' + detail.value.sku_id].num);
+			detail.value.cart_id = toRaw(cartList.value['goods_' + detail.value.goods_id]['sku_' + detail.value.sku_id].id)
+		} else {
+			// 起售大于库存，初始值也应该是零
+			let num = 1;
+			if(minBuy.value > 0){ num = minBuy.value; }
+			if(minBuy.value > detail.value.stock){ num = 0; }
+			buyNum.value = num;
+			detail.value.cart_id = '';
+		}
+
+	}
+)
+const change = (data: any, index: any) => {
+	currSpec.value.name[index] = data.name;
+}
+
+const getSkuId = () => {
+	info.value.skuList.forEach((skuItem: any, skuIndex: any) => {
+		let sku_spec_format = skuItem.sku_spec_format.split(',')
+		if (currSpec.value.name.every((v: any) => sku_spec_format.includes(v))) {
+			currSpec.value.skuId = skuItem.sku_id
+		}
+	})
+}
+
+const addNumChange = () => {
+	if(minBuy.value && minBuy.value > detail.value.stock){
+		uni.showToast({ title: '商品库存小于起购数量', icon: 'none' })
+		return;
+	}
+	if(goodsDetail.value.goods.is_limit){
+		let tips = `该商品单次限购${goodsDetail.value.goods.max_buy}件`;
+		if(goodsDetail.value.goods.limit_type != 1){ //单次限购
+			tips = `该商品每人限购${goodsDetail.value.goods.max_buy}件`;
+		}
+		if(buyNum.value >= goodsDetail.value.goods.max_buy){
+			uni.showToast({ title: tips, icon: 'none' })
+		}
+	}
+}
+
+const reduceNumChange = () => {
+	if(goodsDetail.value.goods.is_limit && minBuy.value){
+		let tips = `该商品起购${minBuy.value}件`;
+		if(buyNum.value <= minBuy.value){
+			uni.showToast({ title: tips, icon: 'none' })
+		}
+	}
+}
+
+const save = () => {
+    //删除商品
+    if (buyNum.value == 0) {
+        // 购物车减少数量
+        cartStore.reduce({
+            id: detail.value.cart_id || '',
+            goods_id: detail.value.goods_id,
+            sale_price: detail.value.sale_price,
+            sku_id: detail.value.sku_id
+        });
+    } else {
+
+        let price = 0
+
+         if (goodsDetail.value.goods.member_discount && getToken() && detail.value.member_price != detail.value.price) {
+            price = detail.value.member_price ? detail.value.member_price : detail.value.price // 会员价
+        } else {
+            price = detail.value.price
+        }
+
+        // 购物车添加数量
+        cartStore.increase({
+            id: detail.value.cart_id || '',
+            goods_id: detail.value.goods_id,
+            sku_id: detail.value.sku_id,
+            stock: detail.value.stock,
+            sale_price: price,
+            num: buyNum.value
+			
+        }, 0, () => {
+            uni.showToast({
+                title: '加入购物车成功',
+                icon: 'none'
+            });
+        });
+    }
+    goodsSkuPop.value = false
+
+}
+
+// 商品价格
+const goodsPrice = (data:any) => {
+    let price = "0.00";
+    if (goodsDetail.value.goods.member_discount && getToken() && data.member_price != data.price) {
+        price = data.member_price ? data.member_price : data.price // 会员价
+    } else {
+        price = data.price
+    }
+    return price;
+}
+
+// 价格类型 
+const priceType = (data:any) => {
+    let type = "";
+    if (goodsDetail.value.goods.member_discount && getToken() && data.member_price != data.price) {
+        type = 'member_price' // 会员价
+    } else {
+        type = ""
+    }
+    return type;
+}
+
+defineExpose({
+	open
+})
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .u-number-box .u-number-box__slot{
+		display: flex;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/goods/components/category-template-one-one.vue b/src/addon/shop/pages/goods/components/category-template-one-one.vue
new file mode 100644
index 0000000..f6ac21f
--- /dev/null
+++ b/src/addon/shop/pages/goods/components/category-template-one-one.vue
@@ -0,0 +1,793 @@
+<template>
+	<view class="min-h-screen bg-[var(--page-bg-color)] overflow-hidden">
+		<view class="mescroll-box bg-[var(--page-bg-color)]" :class="{ 'cart': config.cart.control && config.cart.event === 'cart', 'detail': !(config.cart.control && config.cart.event === 'cart') }" v-if="tabsData.length">
+			<mescroll-body ref="mescrollRef" :down="{ use: false }" @init="mescrollInit" @up="getListFn">
+				<view v-if="config.search.control" class="search-box z-10 bg-[#fff] fixed top-0 left-0 right-0 h-[100rpx] box-border">
+					<view class="flex-1 search-input">
+						<text @click.stop="searchNameFn" class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn"></text>
+						<input class="input" type="text" v-model="searchName" :placeholder="config.search.title" @confirm="searchNameFn" placeholderClass="text-[var(--text-color-light9)]">
+						<text v-if="searchName" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="searchName=''"></text>
+					</view>
+				</view>
+				<!--  #ifdef  H5 -->
+				<view class="tabs-box z-2 fixed left-0 bg-[#fff] bottom-[50px] top-0" :class="{ '!top-[100rpx]': config.search.control, 'pb-[98rpx]': config.cart.control && config.cart.event === 'cart' }">
+					<scroll-view :scroll-y="true" class="scroll-height">
+						<view class="bg-[var(--temp-bg)]">
+							<view class="tab-item" :class="{ 'tab-item-active': index == tabActive,'rounded-br-[12rpx]':tabActive-1===index,'rounded-tr-[12rpx]':tabActive+1===index}" v-for="(item, index) in tabsData" :key="index" @click="firstLevelClick(index, item)">
+								<view class="text-box text-left leading-[1.3] break-words px-[16rpx]">
+									{{ item.category_name }}
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<!--  #endif -->
+				<!--  #ifndef  H5 -->
+				<view class="tabs-box z-2 fixed left-0 bg-[#fff] pb-ios bottom-[100rpx] top-0" :class="{ 'top-[126rpx]': config.search.control, '!bottom-[198rpx]': config.cart.control && config.cart.event === 'cart' }">
+					<scroll-view :scroll-y="true" class="scroll-height">
+						<view class="bg-[var(--temp-bg)]">
+							<view class="tab-item" :class="{ 'tab-item-active': index == tabActive,'rounded-br-[12rpx]':tabActive-1===index,'rounded-tr-[12rpx]':tabActive+1===index}" v-for="(item, index) in tabsData" :key="index" @click="firstLevelClick(index, item)">
+								<view class="text-box text-left leading-[1.3] break-words px-[16rpx]">
+									{{ item.category_name }}
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<!--  #endif -->
+				<view class="flex justify-center flex-wrap pl-[188rpx] pb-[20rpx]" :class="{ ' pt-[120rpx]': config.search.control, ' pt-[20rpx]': !(config.search.control) }">
+					<template v-for="(item, index) in list" :key="item.goods_id">
+						<view
+							class="box-border bg-white w-full flex mr-[20rpx] py-[24rpx] px-[20rpx] rounded-[var(--rounded-small)]"
+							:class="{ 'mt-[16rpx]': index }" @click.stop="toLink(item.goods_id)">
+							<view class="w-[168rpx] h-[168rpx] flex items-center justify-center rounded-[var(--goods-rounded-small)] overflow-hidden">
+								<u--image width="168rpx" height="168rpx" radius="var(--goods-rounded-small)" :src="img( item.goods_cover_thumb_mid || '')" model="aspectFill">
+									<template #error>
+										<image class="w-[168rpx] h-[168rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+							</view>
+							<view class="flex flex-1 ml-[20rpx] flex-wrap flex-col">
+								<view class="max-h-[80rpx] text-[26rpx] leading-[40rpx] multi-hidden">
+									{{ item.goods_name }}</view>
+								<view class="flex-1 flex items-end justify-between">
+									<view class="text-[var(--price-text-color)] price-font -mb-[8rpx]">
+										<text class="text-[24rpx] font-500">￥</text>
+										<text class="text-[40rpx] font-500">{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
+										<text class="text-[24rpx] font-500">.{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
+										<image class="h-[24rpx] max-w-[46rpx] ml-[6rpx]" v-if="priceType(item) == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+									</view>
+									<block v-if="!item.isMaxBuy">
+										<view
+											v-if="
+											(item.goods_type == 'real' || (item.goods_type == 'virtual' && item.virtual_receive_type != 'verify')) &&
+											item.goodsSku.sku_spec_format === '' && cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id] && config.cart.control && config.cart.event === 'cart'"
+											class="flex items-center">
+											<view class="relative w-[32rpx] h-[32rpx]">
+												<text class="text-[32rpx] text-color nc-iconfont nc-icon-jianshaoV6xx absolute flex items-center justify-center -left-[14rpx] -bottom-[14rpx] -right-[14rpx] -top-[14rpx]"
+													@click.stop="reduceCart(item, cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id])"></text>
+											</view>
+											<text class="text-[#333] text-[24rpx] mx-[16rpx]">{{ cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id].num }}</text>
+											<view class="relative w-[32rpx] h-[32rpx]">
+												<text class="text-[32rpx] text-color iconfont iconjiahao2fill absolute flex items-center justify-center -left-[14rpx] -bottom-[14rpx] -right-[14rpx] -top-[14rpx]"
+													:id="'itemCart' + index"
+													@click.stop="addCartBtn(item,cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id],'itemCart' + index)"></text>
+											</view>
+										</view>
+										<template v-else-if="(item.goods_type == 'virtual' && config.cart.event !== 'cart') || item.goods_type == 'real'">
+											<view v-if="config.cart.control && config.cart.style === 'style-1'" class="h-[44rpx] relative">
+												<view :id="'itemCart' + index" class="w-[102rpx] box-border text-center text-[#fff] primary-btn-bg h-[46rpx] text-[22rpx] leading-[46rpx] rounded-[100rpx]" @click.stop="itemCart(item, 'itemCart' + index)">
+													{{ config.cart.text }}
+												</view>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-16rpx] top-[-16rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+											<view v-if="config.cart.control && config.cart.style === 'style-2'" class="w-[50rpx] h-[50rpx] relative"  @click.stop="itemCart(item, 'itemCart' + index)">
+												<text :id="'itemCart' + index" class="text-color nc-iconfont nc-icon-tianjiaV6xx text-[44rpx]"></text>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-16rpx] top-[-16rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+											<view v-if="config.cart.control && config.cart.style === 'style-3'" class="w-[50rpx] flex justify-center items-end  h-[50rpx]  relative" @click.stop="itemCart(item, 'itemCart' + index)">
+												<text :id="'itemCart' + index"
+													class="text-color nc-iconfont nc-icon-gouwucheV6xx6 !text-[34rpx]"></text>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-10rpx] top-[-2rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+											<view v-if="config.cart.control && config.cart.style === 'style-4'" class="w-[50rpx] h-[50rpx] justify-center flex items-end relative" @click.stop="itemCart(item, 'itemCart' + index)">
+												<view :id="'itemCart' + index"
+													class=" flex items-center justify-center text-[#fff] bg-color h-[44rpx] w-[44rpx] rounded-[22rpx] text-center">
+													<text class="nc-iconfont nc-icon-gouwucheV6xx6 !text-[26rpx]"></text>
+												</view>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-10rpx] top-[-10rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+										</template>
+									</block>
+								</view>
+							</view>
+						</view>
+
+					</template>
+					<mescroll-empty class="part" v-if="!list.length && !loading && listLoading" :option="{tip : '暂无商品'}"></mescroll-empty>
+				</view>
+				<add-cart-popup ref="cartRef" />
+			</mescroll-body>
+			<!--  #ifdef  H5 -->
+			<view v-if="config.cart.control && config.cart.event === 'cart'"
+				class="bg-[#fff] z-10 flex justify-between items-center fixed left-0 right-0 bottom-[50px] box-solid px-[24rpx] py-[17rpx] mb-ios border-[0] border-t-[2rpx] border-solid border-[#f6f6f6]">
+				<view class="flex items-center">
+					<view class="w-[66rpx] h-[66rpx] mr-[27rpx] relative">
+						<view id="animation-end" class="w-[66rpx] h-[66rpx] rounded-[35rpx] bg-[var(--primary-color)] text-center leading-[70rpx]" @click.stop="toCart">
+							<text class="nc-iconfont nc-icon-gouwucheV6mm1 text-[#fff] text-[32rpx]"></text>
+						</view>
+						<view v-if="totalNum"
+							class="border-[1rpx] border-solid border-[#fff]"
+							:class="['absolute left-[40rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', totalNum > 9 ? 'px-[10rpx]' : '']">
+							{{ totalNum > 99 ? "99+" : totalNum }}
+						</view>
+					</view>
+					<text class="text-[26rpx] font-500 text-[#333]">总计：</text>
+					<view class="text-[var(--price-text-color)] price-font font-bold flex items-baseline">
+						<text class="text-[26rpx] mr-[6rpx]">￥</text>
+						<text class="text-[44rpx]">{{ parseFloat(totalMoney) }}</text>
+					</view>
+				</view>
+				<button class="w-[180rpx] h-[70rpx] text-[26rpx] leading-[70rpx] font-500 m-0 rounded-full remove-border" :class="{'primary-btn-bg !text-[#fff]': parseFloat(totalMoney) > 0, 'bg-[#F7F7F7] !text-[var(--text-color-light9)]': parseFloat(totalMoney) <= 0}" @click="settlement">去结算</button>
+			</view>
+			<!--  #endif -->
+
+			<!-- #ifdef MP-WEIXIN -->
+			<view v-if="config.cart.control && config.cart.event === 'cart'"
+				class="bg-[#fff] z-10 flex justify-between items-center fixed left-0 right-0 bottom-[100rpx] box-solid px-[24rpx] py-[17rpx] mb-ios border-[0] border-t-[2rpx] border-solid border-[#f6f6f6]">
+				<view class="flex items-center">
+					<view class="w-[66rpx] h-[66rpx] mr-[27rpx] relative">
+						<view id="animation-end"
+							class="w-[66rpx] h-[66rpx] rounded-[35rpx] bg-[var(--primary-color)] text-center leading-[66rpx]"
+							@click.stop="toCart">
+							<text class="nc-iconfont nc-icon-gouwucheV6mm1 text-[#fff] text-[32rpx]"></text>
+						</view>
+						<view v-if="totalNum"
+							class="border-[1rpx] border-solid border-[#fff]"
+							:class="['absolute left-[40rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', totalNum > 9 ? 'px-[10rpx]' : '']">
+							{{ totalNum > 99 ? "99+" : totalNum }}
+						</view>
+					</view>
+					<text class="text-[26rpx] font-500 text-[#333]">总计：</text>
+					<view class="text-[var(--price-text-color)] price-font font-bold inline-block">
+						<text class="text-[26rpx] mr-[6rpx]">￥</text>
+						<text class="text-[44rpx]">{{ parseFloat(totalMoney) }}</text>
+					</view>
+				</view>
+				<button v-if="isBindMobile && userInfo && !userInfo.mobile" class="w-[180rpx] h-[70rpx] text-[26rpx] leading-[70rpx] font-500 m-0 rounded-full remove-border" :class="{'primary-btn-bg !text-[#fff]': parseFloat(totalMoney) > 0, 'bg-[#F7F7F7] !text-[var(--text-color-light9)]': parseFloat(totalMoney) <= 0}" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">去结算</button>
+				<button v-else class="w-[180rpx] h-[70rpx] text-[26rpx] leading-[70rpx] font-500 m-0 rounded-full remove-border" :class="{'primary-btn-bg !text-[#fff]': parseFloat(totalMoney) > 0, 'bg-[#F7F7F7] !text-[var(--text-color-light9)]': parseFloat(totalMoney) <= 0}" @click="settlement">去结算</button>
+			</view>
+			<!--  #endif -->
+		</view>
+
+		<view v-show="animationElStatus" :style="animationElStatus"
+			class="fixed z-999 flex items-center justify-center text-[#fff] bg-color h-[44rpx] w-[44rpx] rounded-[22rpx] text-center">
+			<text class=" nc-iconfont nc-icon-gouwucheV6xx6 !text-[30rpx]"></text>
+		</view>
+		<mescroll-empty v-if="!tabsData.length && !loading" :option="{tip : '暂无商品分类'}"></mescroll-empty>
+		<loading-page :loading="loading"></loading-page>
+
+		<tabbar />
+		<!-- 强制绑定手机号 -->
+		<bind-mobile ref="bindMobileRef" />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, getCurrentInstance } from 'vue';
+import { t } from '@/locale';
+import { img, redirect, getToken } from '@/utils/common';
+import { getGoodsCategoryTree, getGoodsPages } from '@/addon/shop/api/goods';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import addCartPopup from './add-cart-popup.vue'
+import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+import { useLogin } from '@/hooks/useLogin'
+import useMemberStore from '@/stores/member'
+import useCartStore from '@/addon/shop/stores/cart'
+import { cloneDeep } from 'lodash-es'
+
+const cartStore = useCartStore();
+
+// 查询购物车列表
+cartStore.getList();
+
+const cartList = computed(() => cartStore.cartList)
+const totalNum = computed(() => cartStore.totalNum)
+const totalMoney = computed(() => cartStore.totalMoney)
+const memberStore = useMemberStore()
+const userInfo = computed(() => memberStore.info)
+const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const prop = defineProps({
+	config: {
+		type: Object,
+		default: (() => { return {} })
+	},
+    categoryId:{
+	    type:[String,Number],
+	    default:0
+    }
+})
+let config = prop.config
+let categoryId = prop.categoryId;
+const list = ref<Array<Object>>([]);
+const searchName = ref("");
+const loading = ref<boolean>(true);//页面加载动画
+const listLoading = ref<boolean>(false);//列表加载动画
+const cartData = ref<Array<any>>([])
+const instance = getCurrentInstance(); // 获取组件实例
+cartData.value = uni.getStorageSync('shopCart') || []
+interface acceptingDataStructure {
+	data: acceptingDataItemStructure,
+	msg: string,
+	code: number
+}
+interface acceptingDataItemStructure {
+	data: object,
+	[propName: string]: number | string | object
+}
+interface mescrollStructure {
+	num: number,
+	size: number,
+	endSuccess: Function,
+	[propName: string]: any
+}
+const getListFn = (mescroll: mescrollStructure) => {
+	listLoading.value = false
+	getGoodsPages({
+		page: mescroll.num,
+		limit: mescroll.size,
+		goods_category: categoryId, // 商品分类id
+	}).then((res: any) => {
+		let newArr = res.data.data
+		//设置列表数据
+
+		if (mescroll.num == 1) {
+			list.value = []; //如果是第一页需手动制空列表
+		}
+		list.value = list.value.concat(newArr);
+		// 商品限购
+		goodsMaxBuy();
+		loading.value = false;
+		mescroll.endSuccess(newArr.length);
+		if (!list.value.length) listLoading.value = true
+	}).catch(() => {
+		loading.value = false;
+		listLoading.value = true
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+
+const goodsMaxBuy = ()=>{
+	list.value.forEach((data,index)=>{
+		data.isMaxBuy = false;
+
+		let maxBuyNum = -1;
+		// 限购 - 是否开启限购
+		if(data.is_limit){
+			if(data.max_buy){
+				let max_buy = 0;
+				if(data.limit_type == 1){ //单次限购
+					max_buy = data.max_buy;
+				}else{ // 单人限购
+					let buyVal = data.max_buy - (data.has_buy||0);
+					max_buy = buyVal > 0 ? buyVal : 0;
+				}
+
+				if(max_buy > data.stock){
+					maxBuyNum = data.stock
+				}else if(max_buy <= data.stock){
+					maxBuyNum = max_buy;
+				}
+			}
+		}
+
+		if(maxBuyNum == 0){
+			data.isMaxBuy = true;
+		}
+	})
+}
+
+
+const toLink = (goods_id: string) => {
+	redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id } })
+}
+
+onMounted(() => {
+	getCategoryData()
+})
+
+//设置购物车动画
+const animationElStatus = ref('')
+const animationAddRepeatFlag = ref<Boolean>(false)
+const cartRepeatFlag = ref<Boolean>(false)
+const animationAddCart = (row: any, id: any) => {
+	if (animationAddRepeatFlag.value || cartRepeatFlag.value) return false
+	animationAddRepeatFlag.value = true
+	cartRepeatFlag.value = true
+
+	let obj: any = {
+		goods_id: row.goodsSku.goods_id,
+		sku_id: row.goodsSku.sku_id,
+		sale_price: goodsPrice(row),
+		stock: row.goodsSku.stock
+	};
+	if (row.id) {
+		obj.num = row.num;
+		obj.id = row.id;
+	}
+
+	// 起购
+	let num = 1;
+	if(row.min_buy > 0 && !row.num){
+		num = row.min_buy;
+	}else{
+		num = 1;
+	}
+
+	cartStore.increase(obj, num, () => {
+		cartRepeatFlag.value = false
+	});
+	// #ifdef  MP-WEIXIN
+	setTimeout(() => {
+		uni.createSelectorQuery().in(instance).select('#animation-end').boundingClientRect((res: any) => {
+			uni.createSelectorQuery().in(instance).select('#' + id).boundingClientRect((position: any) => {
+				animationElStatus.value = `top: ${ position.top }px; left: ${ position.left }px;`
+				setTimeout(() => {
+					animationElStatus.value = `top: ${ res.top + res.height / 2 - position.height / 3 }px; left: ${ res.left + res.width / 2 - position.width / 3 }px; transition: all 0.8s; transform: rotate(-720deg);`
+				}, 20);
+
+				setTimeout(() => {
+					animationElStatus.value = ''
+					animationAddRepeatFlag.value = false
+				}, 1020);
+
+			}).exec()
+
+		}).exec()
+	}, 100)
+	// #endif
+	// #ifdef  H5
+	setTimeout(() => {
+		const animationEnd: any = window.document.getElementById('animation-end');
+		const animationEndLeft = animationEnd.getBoundingClientRect().left;
+		const animationEndTop = animationEnd.getBoundingClientRect().top;
+
+		const itemCart: any = window.document.getElementById(id);
+		const itemCartLift = itemCart.getBoundingClientRect().left;
+		const itemCartTop = itemCart.getBoundingClientRect().top;
+		animationElStatus.value = `top: ${ itemCartTop }px; left: ${ itemCartLift }px;`
+
+		setTimeout(() => {
+			animationElStatus.value = `top: ${ animationEndTop + animationEnd.offsetHeight / 2 - itemCart.offsetHeight / 3 }px; left: ${ animationEndLeft + animationEnd.offsetWidth / 2 - itemCart.offsetHeight / 3 }px; transition: all 0.8s; transform: rotate(-720deg);`
+		}, 20);
+		setTimeout(() => {
+			animationElStatus.value = ''
+			animationAddRepeatFlag.value = false
+		}, 1020);
+
+	}, 100);
+	// #endif
+}
+
+/**
+ * @description 获取分类数据
+ * */
+const tabsData:any = ref<Array<Object>>([])
+const getCategoryData = () => {
+	loading.value = true;
+	getGoodsCategoryTree().then((res: any) => {
+		tabsData.value = res.data;
+        if (categoryId) {
+            for (let i = 0; i < tabsData.value.length; i++) {
+                if (tabsData.value[i].category_id == categoryId) {
+                    tabActive.value = i;
+                    break;
+                }
+                if(tabsData.value[i].child_list){
+                    for(let k=0;k<tabsData.value[i].child_list.length;k++){
+                        if(tabsData.value[i].child_list[k].category_id == categoryId){
+                            tabActive.value = i;
+                            break;
+                        }
+                    }
+                }
+            }
+        }else{
+            categoryId = res.data[0].category_id;
+        }
+		loading.value = false;
+	}).catch(() => {
+		loading.value = false;
+	});
+}
+
+// 一级菜单样式控制
+const tabActive = ref<number>(0)
+
+// 一级菜单点击事件
+const firstLevelClick = (index: number, data: any) => {
+	tabActive.value = index;
+    categoryId = data.category_id;
+	list.value = [];
+	getMescroll().resetUpScroll();
+}
+
+// 搜索名字
+const searchNameFn = () => {
+	// getMescroll().resetUpScroll();
+	if(searchName.value) redirect({ url: '/addon/shop/pages/goods/list', param: { goods_name: encodeURIComponent(searchName.value) } })
+}
+
+//点击商品购物车按钮
+const cartRef = ref()
+const itemCart = (row: any, id: any) => {
+    // 虚拟商品，并且需要核销，禁止加入购物车
+    if(row.goods_type == 'virtual' && row.virtual_receive_type == 'verify'){
+        return toLink(row.goodsSku.goods_id)
+    }
+
+	if (config.cart.event !== 'cart') {
+		return toLink(row.goodsSku.goods_id)
+	}
+
+	if (!userInfo.value) {
+		useLogin().setLoginBack({ url: '/addon/shop/pages/goods/category' })
+		return false
+	}
+
+	if (row.goodsSku.sku_spec_format) {
+		cartRef.value.open(row.goodsSku.sku_id)
+	} else {
+		//单规格添加购物车
+		if (!row.goodsSku.stock || parseInt(row.goodsSku.num||0) > parseInt(row.goodsSku.stock)) {
+		    uni.showToast({ title: '商品库存不足', icon: 'none' })
+		    return;
+		}
+		if(row.min_buy && row.min_buy > parseInt(row.stock)){
+			uni.showToast({ title: '商品库存小于起购数量', icon: 'none' })
+			return;
+		}
+		animationAddCart(row, id)
+	}
+}
+//点击购物车加号 添加数量
+const addCartBtn = (item: any, row: any, id: string) => {
+	if (parseInt(row.num) >= parseInt(row.stock)) {
+	    uni.showToast({ title: '商品库存不足', icon: 'none' })
+	    return;
+	}
+
+	// 起购
+	let num = row.num;
+	if(item.min_buy > 0 && item.min_buy > num){
+		num = item.min_buy;
+	}
+
+	/************** 限购-start *****************/
+	let maxBuyNum = -1;
+	// 限购 - 是否开启限购
+	if(item.is_limit && item.max_buy){
+		let max_buy = 0;
+		if(item.limit_type == 1){ //单次限购
+			max_buy = item.max_buy;
+		}else{ // 单人限购
+			let buyVal = item.max_buy - (item.has_buy||0);
+			max_buy = buyVal > 0 ? buyVal : 0;
+		}
+
+		if(max_buy > item.goodsSku.stock){
+			maxBuyNum = item.goodsSku.stock
+		}else if(max_buy <= item.goodsSku.stock){
+			maxBuyNum = max_buy;
+		}
+	}
+	
+	if(item.is_limit && num >= item.max_buy){
+		let tips = `该商品单次限购${item.max_buy}件`;
+		if(item.limit_type != 1){ //单次限购
+			tips = `该商品每人限购${item.max_buy}件`;
+		}
+		uni.showToast({ title: tips, icon: 'none' })
+		return false;
+	}
+	/************** 限购-end *****************/
+
+	let obj = cloneDeep(item)
+    obj.num = num;
+    obj.id = row.id;
+	animationAddCart(obj, id)
+}
+
+//点击购物车减号
+const reduceCart = (data: any, row: any) => {
+	if(cartRepeatFlag.value) return false
+	cartRepeatFlag.value = true
+
+	let reduceNum = 1;
+	if(data.min_buy > 0 && data.min_buy == row.num){
+		reduceNum = data.min_buy;
+	}
+
+	cartStore.reduce({
+		id: row.id,
+		goods_id: row.goods_id,
+		sku_id: row.sku_id,
+		stock: row.stock,
+		sale_price: row.sale_price,
+		num: row.num
+	}, reduceNum, () => {
+		cartRepeatFlag.value = false
+	})
+
+}
+
+//进入购物车
+const toCart = () => {
+	redirect({ url: '/addon/shop/pages/goods/cart' })
+}
+
+//强制绑定手机号
+const bindMobileRef: any = ref(null)
+const isBindMobile = ref(uni.getStorageSync('isbindmobile'))
+
+/**
+ * 结算
+ */
+const settlement = () => {
+
+	// #ifdef H5
+	// 绑定手机号
+	if(uni.getStorageSync('isbindmobile')){
+		bindMobileRef.value.open()
+		return false
+	}
+	// #endif
+
+	if (!totalNum.value) {
+		uni.showToast({ title: '还没有选择商品', icon: 'none' })
+		return
+	}
+	const cart_ids:any = []
+	Object.values(cartList.value).forEach(item => {
+		Object.keys(item).forEach(v => {
+			if (v != 'totalNum' && v != 'totalMoney') cart_ids.push(item[v].id)
+		})
+
+	})
+	if(cart_ids.length == 0){
+		return;
+	}
+	uni.setStorage({
+		key: 'orderCreateData',
+		data: { cart_ids },
+		success() {
+			redirect({ url: '/addon/shop/pages/order/payment' })
+		}
+	})
+}
+
+// 价格类型
+const priceType = (data:any) =>{
+	let type = "";
+    if(data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
+        type = 'member_price' // 会员价
+    }
+    return type;
+}
+
+// 商品价格
+const goodsPrice = (data:any) =>{
+	let price = "0.00";
+    if (data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
+        price = data.goodsSku.member_price ? data.goodsSku.member_price : data.goodsSku.price // 会员价
+    } else {
+        price = data.goodsSku.price
+    }
+    return price;
+}
+</script>
+
+<style lang="scss" scoped>
+.remove-border {
+	&::after {
+		border: none;
+	}
+}
+.border-color {
+	border-color: var(--primary-color) !important;
+}
+
+.text-color {
+	color: var(--primary-color) !important;
+}
+
+.bg-color {
+	background-color: var(--primary-color) !important;
+}
+
+.class-select {
+	position: relative;
+	font-weight: bold;
+
+	&::before {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		height: 6rpx;
+		background-color: var(--primary-color);
+		width: 90%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.list-select {
+	position: relative;
+	margin-right: 28rpx;
+
+	&::before {
+		content: "";
+		position: absolute;
+		background-color: #999;
+		width: 2rpx;
+		height: 70%;
+		top: 50%;
+		right: -14rpx;
+		transform: translatey(-50%);
+	}
+}
+
+.transform-rotate {
+	transform: rotate(180deg);
+}
+
+.text-color {
+	color: var(--primary-color);
+}
+
+.bg-color {
+	background-color: var(--primary-color);
+}
+
+// search input
+.search-box {
+	display: flex;
+	align-items: center;
+	padding: 0 30rpx;
+}
+
+.search-box .search-ipt {
+	height: 58rpx;
+	background-color: #F6F8F8;
+	border-radius: 33rpx;
+}
+
+.search-box .search-ipt .input-placeholder {
+	color: #A5A6A6;
+}
+
+.tabs-box {
+	width: 168rpx;
+	font-size: 26rpx;
+}
+
+.tabs-box .tab-item {
+	min-height: 56rpx;
+	padding: 20rpx 0;
+	text-align: center;
+	background-color:#fff;
+	display: flex;
+	align-items: center;
+}
+
+.tabs-box .tab-item-active {
+	position: relative;
+	color: var(--primary-color);
+	background-color:var(--temp-bg);
+	&::before {
+		display: inline-block;
+		position: absolute;
+		left: 0rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		content: '';
+		width: 6rpx;
+		height: 48rpx;
+		background-color: var(--primary-color);
+	}
+
+	&::after {
+		display: inline-block;
+		position: absolute;
+		left: 0rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		content: '';
+		width: 6rpx;
+		height: 48rpx;
+		background-color: var(--primary-color);
+	}
+}
+
+.scroll-height{
+	height: 100%;
+}
+/*  #ifdef  H5  */
+.cart{
+	.noData1{
+		height: calc(100vh - 146rpx - 100rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 100rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.noData2{
+		height: calc(100vh - 40rpx - 100rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 100rpx - 50px - env(safe-area-inset-bottom));
+	}
+}
+.detail{
+	.noData1{
+		height: calc(100vh - 146rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.noData2{
+		height: calc(100vh - 40rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 50px - env(safe-area-inset-bottom));
+	}
+}
+/*  #endif  */
+/*  #ifndef  H5  */
+.cart{
+	.noData1{
+		height: calc(100vh - 146rpx - 100rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 100rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.noData2{
+		height: calc(100vh - 40rpx - 100rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 100rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+}
+.detail{
+	.noData1{
+		height: calc(100vh - 146rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.noData2{
+		height: calc(100vh - 40rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+}
+/*  #endif  */
+
+// 空页面
+.mescroll-empty.empty-page.part{
+	width: 542rpx;
+	height: 542rpx;
+	margin-top: 0;
+	margin-left: 0;
+	padding-top: 50rpx;
+	.img{
+		width: 160rpx !important;
+		height: 120rpx !important;
+	}
+}
+</style>
+
diff --git a/src/addon/shop/pages/goods/components/category-template-two-one.vue b/src/addon/shop/pages/goods/components/category-template-two-one.vue
new file mode 100644
index 0000000..c1e2b2f
--- /dev/null
+++ b/src/addon/shop/pages/goods/components/category-template-two-one.vue
@@ -0,0 +1,306 @@
+<template>
+	<view class=" bg-[var(--page-bg-color)] overflow-hidden min-h-screen">
+		<view class="mescroll-box" v-if="tabsData.length">
+			<view v-if="config.search.control" class="search-box box-border z-10 fixed top-0 left-0 right-0  h-[100rpx] bg-[#fff]">
+				<view class="flex-1 search-input">
+					<text @click.stop="searchNameFn" class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn"></text>
+					<input class="input" type="text" v-model="searchName" :placeholder="config.search.title" placeholderClass="text-[var(--text-color-light9)]" @confirm="searchNameFn">
+					<text v-if="searchName" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="searchName=''"></text>
+				</view>
+			</view>
+			<view class="tabs-box z-2 fixed left-0 bg-[#fff] bottom-[50px] top-0" :class="{ '!top-[100rpx]': config.search.control }">
+				<scroll-view :scroll-y="true" class="scroll-height">
+					<view class="bg-[var(--temp-bg)]">
+						<view class="tab-item" :class="{ 'tab-item-active': index == tabActive,'rounded-br-[12rpx]':tabActive-1===index,'rounded-tr-[12rpx]':tabActive+1===index  }" v-for="(item, index) in tabsData" :key="index" @click="firstLevelClick(index, item)">
+							<view class="text-box text-left leading-[1.3] break-words px-[16rpx]">
+								{{ item.category_name }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+			<scroll-view class="h-[100vh]" :scroll-y="true">
+				<view class="pl-[188rpx] scroll-ios pt-[20rpx] pr-[20rpx]" :class="{ '!pt-[120rpx]': config.search.control }">
+					<view class="bg-[#fff] grid grid-cols-3 gap-x-[50rpx] gap-y-[32rpx] py-[32rpx] px-[24rpx] rounded-[var(--rounded-big)]" v-if="tabsData[tabActive]?.child_list && !loading">
+						<template v-for="(item, index) in tabsData[tabActive]?.child_list" :key="item.category_id">
+							<view @click="toLink(item.category_id)" class=" flex items-center justify-center flex-col">
+								<u--image radius="var(--goods-rounded-big)" width="120rpx" height="120rpx" :src="img(item.image ? item.image : '')" model="aspectFill">
+									<template #error>
+										<image class="rounded-[var(--goods-rounded-big)] overflow-hidden w-[120rpx] h-[120rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+								<view class="text-[24rpx] text-center mt-[16rpx] leading-[34rpx]">{{ item.category_name }}</view>
+							</view>
+						</template>
+					</view>
+					<mescroll-empty class="part" v-if="!tabsData[tabActive]?.child_list && !loading" :option="{tip : '暂无商品分类'}"></mescroll-empty>
+				</view>
+			</scroll-view>
+		</view>
+		<tabbar />
+		<mescroll-empty  v-if="!tabsData.length && !loading" :option="{tip : '暂无商品分类'}"></mescroll-empty>
+		<loading-page :loading="loading"></loading-page>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { img, redirect } from '@/utils/common';
+import { getGoodsCategoryTree } from '@/addon/shop/api/goods';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import { t } from '@/locale';
+
+const prop = defineProps({
+    config: {
+        type: Object,
+        default: (() => {
+            return {}
+        })
+    },
+    categoryId: {
+        type: [String, Number],
+        default: 0
+    }
+})
+let config = prop.config
+let categoryId = prop.categoryId;
+const searchName = ref("");
+const loading = ref<boolean>(true);
+
+onMounted(() => {
+	getCategoryData()
+})
+
+/**
+ * @description 获取分类数据
+ * */
+const tabsData: any = ref<Array<Object>>([])
+const getCategoryData = () => {
+    loading.value = true;
+    getGoodsCategoryTree().then((res: any) => {
+        tabsData.value = res.data;
+        if (categoryId) {
+            for (let i = 0; i < tabsData.value.length; i++) {
+                if (tabsData.value[i].category_id == categoryId) {
+                    tabActive.value = i;
+                    break;
+                }
+                if(tabsData.value[i].child_list){
+                    for(let k=0;k<tabsData.value[i].child_list.length;k++){
+                        if(tabsData.value[i].child_list[k].category_id == categoryId){
+                            tabActive.value = i;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        loading.value = false;
+    }).catch(() => {
+        loading.value = false;
+    });
+}
+
+// 一级菜单样式控制
+const tabActive = ref<number>(0)
+
+// 一级菜单点击事件
+const firstLevelClick = (index: number, data: Object) => {
+	tabActive.value = index;
+}
+const toLink = (curr_goods_category: string) => {
+	redirect({ url: '/addon/shop/pages/goods/list', param: { curr_goods_category } })
+}
+// 搜索名字
+const searchNameFn = () => {
+	// getMescroll().resetUpScroll();
+	if(searchName.value) redirect({ url: '/addon/shop/pages/goods/list', param: { goods_name: encodeURIComponent(searchName.value) } })
+}
+</script>
+
+<style lang="scss" scoped>
+.border-color {
+	border-color: var(--primary-color) !important;
+}
+
+.text-color {
+	color: var(--primary-color) !important;
+}
+
+.bg-color {
+	background-color: var(--primary-color) !important;
+}
+
+.class-select {
+	position: relative;
+	font-weight: bold;
+
+	&::before {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		height: 6rpx;
+		background-color: $u-primary;
+		width: 90%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.list-select {
+	position: relative;
+	margin-right: 28rpx;
+
+	&::before {
+		content: "";
+		position: absolute;
+		background-color: #999;
+		width: 2rpx;
+		height: 70%;
+		top: 50%;
+		right: -14rpx;
+		transform: translatey(-50%);
+	}
+}
+
+.transform-rotate {
+	transform: rotate(180deg);
+}
+
+.text-color {
+	color: $u-primary;
+}
+
+.bg-color {
+	background-color: $u-primary;
+}
+
+.search-box {
+	display: flex;
+	align-items: center;
+	padding: 0 30rpx;
+}
+
+.search-box .search-ipt {
+	height: 58rpx;
+	background-color: #fff;
+	border-radius: 33rpx;
+}
+
+.search-box .search-ipt .input-placeholder {
+	color: #A5A6A6;
+}
+
+.tabs-box {
+	width: 168rpx;
+	font-size: 28rpx;
+}
+
+.tabs-box .tab-item {
+	min-height: 48rpx;
+	padding: 18rpx 0;
+	text-align: center;
+	background-color:#fff;
+	display: flex;
+	align-items: center;
+}
+
+.tabs-box .tab-item-active {
+	position: relative;
+	color: var(--primary-color);
+	background-color: var(--temp-bg);
+	&::before {
+		display: inline-block;
+		position: absolute;
+		left: 0rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		content: '';
+		width: 6rpx;
+		height: 48rpx;
+		background-color: var(--primary-color);
+	}
+
+	&::after {
+		display: inline-block;
+		position: absolute;
+		left: 0rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		content: '';
+		width: 6rpx;
+		height: 48rpx;
+		background-color: var(--primary-color);
+	}
+}
+
+$white-bj: #fff;
+
+.mescroll-box {
+	height: 100vh;
+}
+
+.panic-buying {
+	background-color: var(--primary-color);
+	color: $white-bj;
+}
+
+:deep(.mescroll-upwarp) {
+	box-sizing: border-box;
+	padding-left: 182rpx;
+}
+
+:deep(.tab-bar-placeholder) {
+	display: none !important;
+}
+
+:deep(.u-tabbar__placeholder) {
+	display: none !important;
+}
+/*  #ifdef  H5  */
+.scroll-ios{
+	padding-bottom: calc(50px + 20rpx + constant(safe-area-inset-bottom)) !important;
+	padding-bottom: calc(50px  + 20rpx  + env(safe-area-inset-bottom)) !important;
+}
+/*  #endif  */
+/*  #ifndef  H5  */
+.scroll-ios{
+	padding-bottom: calc(120rpx  + constant(safe-area-inset-bottom)) !important;
+	padding-bottom: calc(120rpx  + env(safe-area-inset-bottom)) !important;
+}
+/*  #endif  */
+.scroll-height{
+	height: 100%;
+}
+/*  #ifdef  H5  */
+	.noData1{
+		height: calc(100vh - 146rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.noData2{
+		height: calc(100vh - 40rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 50px - env(safe-area-inset-bottom));
+	}
+/*  #endif  */
+/*  #ifndef  H5  */
+	.noData1{
+		height: calc(100vh - 146rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.noData2{
+		height: calc(100vh - 40rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+/*  #endif  */
+.mescroll-empty.empty-page.part{
+	width: 542rpx;
+	height: 542rpx;
+	margin-top: 0;
+	margin-left: 0;
+	padding-top: 50rpx;
+	.img{
+		width: 160rpx !important;
+		height: 120rpx !important;
+	}
+}
+</style>
diff --git a/src/addon/shop/pages/goods/components/category-template-two-two.vue b/src/addon/shop/pages/goods/components/category-template-two-two.vue
new file mode 100644
index 0000000..29426e2
--- /dev/null
+++ b/src/addon/shop/pages/goods/components/category-template-two-two.vue
@@ -0,0 +1,896 @@
+<template>
+	<view class="min-h-screen bg-[var(--page-bg-color)] overflow-hidden">
+		<view class="mescroll-box bg-[#f6f6f6]" :class="{ 'cart': config.cart.control && config.cart.event === 'cart', 'detail': !(config.cart.control && config.cart.event === 'cart') }" v-if="tabsData.length">
+			<mescroll-body ref="mescrollRef" :down="{ use: false }" @init="mescrollInit" @up="getListFn">
+				<view v-if="config.search.control" class="box-border search-box z-10 bg-[#fff] fixed top-0 left-0 right-0 h-[96rpx]">
+					<view class="flex-1 search-input">
+						<text @click.stop="searchNameFn" class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn"></text>
+						<input class="input" type="text" v-model="searchName" :placeholder="config.search.title" placeholderClass="text-[var(--text-color-light9)]" @confirm="searchNameFn">
+						<text v-if="searchName" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="searchName=''"></text>
+					</view>
+				</view>
+
+				<!--  #ifdef  H5 -->
+				<view class="tabs-box z-2 fixed left-0 bg-[#fff] bottom-[50px] top-0" :class="{ '!top-[96rpx]': config.search.control, 'pb-[98rpx]': config.cart.control && config.cart.event === 'cart' }">
+					<scroll-view :scroll-y="true" class="scroll-height">
+						<view class="bg-[var(--temp-bg)]">
+							<view class="tab-item"
+							      :class="{ 'tab-item-active ': index == tabActive,'rounded-br-[12rpx]':tabActive-1===index && (!tabsData[tabActive].child_list || !tabsData[tabActive].child_list.length),'rounded-tr-[12rpx]':tabActive+1===index&&(!tabsData[tabActive].child_list || !tabsData[tabActive].child_list.length) }" v-for="(item, index) in tabsData" :key="index" @click="firstLevelClick(index, item)">
+								<view class="text-box leading-[1.3] break-words px-[24rpx]">{{ item.category_name }}</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<!--  #endif -->
+
+				<!--  #ifndef  H5 -->
+				<view class="tabs-box z-2 fixed left-0 bg-[#fff] pb-ios bottom-[100rpx] top-0" :class="{ 'top-[96rpx]': config.search.control, '!bottom-[198rpx]': config.cart.control && config.cart.event === 'cart' }">
+					<scroll-view :scroll-y="true" class="scroll-height">
+						<view class="bg-[var(--temp-bg)]">
+							<view class="tab-item" :class="{ 'tab-item-active': index == tabActive,'rounded-br-[12rpx]':tabActive-1===index&&(!tabsData[tabActive].child_list || !tabsData[tabActive].child_list.length),'rounded-tr-[12rpx]':tabActive+1===index&&(!tabsData[tabActive].child_list || !tabsData[tabActive].child_list.length) }" v-for="(item, index) in tabsData" :key="index" @click="firstLevelClick(index, item)">
+								<view class="text-box px-[16rpx] leading-[1.3] break-words">
+									{{ item.category_name }}
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<!--  #endif -->
+				<view class="flex items-center h-[98rpx] pl-[24rpx] pr-[48rpx] py-[20rpx] z-10 bg-white fixed left-[168rpx] right-0 box-border top-0"
+					:class="{ '!top-[94rpx]': config.search.control }"
+					v-if="tabsData[tabActive]?.child_list && tabsData[tabActive]?.child_list.length">
+					<template v-if="!labelPopup">
+						<scroll-view :scroll-x="true" scroll-with-animation
+							:scroll-into-view="'id' + (subActive ? subActive - 1 : 0)"
+							class="flex-1 h-[54rpx] scroll-Y box-border pr-[24rpx] bg-white">
+							<view class="flex items-center h-[54rpx] box-border">
+								<text
+									class="w-[150rpx] flex-shrink-0 px-[14rpx] h-[54rpx] truncate  text-center !leading-[50rpx] !text-[24rpx] border-[2rpx] border-solid !rounded-[100rpx] box-border text-[#333] box-border"
+									:class="{ 'bg-[var(--primary-color-light)] font-500 text-[var(--primary-color)] border-[var(--primary-color)]': index === subActive, 'border-[var(--temp-bg)]  bg-[var(--temp-bg)]': index != subActive, ' ml-[24rpx]': index != 0 }"
+									v-for="(item, index) in tabsData[tabActive]?.child_list"
+									:key="tabsData[tabActive].category_id" :id="'id' + index"
+									@click="subMenuClick(index, item)">{{ item.category_name }}</text>
+							</view>
+						</scroll-view>
+						<view class="absolute right-[24rpx] nc-iconfont nc-icon-xiaV6xx text-[30rpx] w-[30rpx] h-[30rpx] text-center transform " @click="labelPopup = true"></view>
+					</template>
+					<template v-else>
+						<view class="flex-1 h-[48rpx] text-[28rpx] text-[var(--text-color-light9)] pr-[24rpx] leading-[48rpx]">全部分类</view>
+						<text class="absolute right-[24rpx] nc-iconfont nc-icon-shangV6xx-1 text-[#333] text-[30rpx]" @click="labelPopup = false"></text>
+					</template>
+				</view>
+				<view class="labelPopup" :class="{ 'active': config.search.control }">
+					<u-popup :show="labelPopup" mode="top" @close="labelPopup = false">
+						<view class="flex flex-wrap pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>
+							<text
+								class="px-[14rpx] flex-shrink-0 w-[160rpx] box-border ml-[20rpx] mb-[26rpx] h-[60rpx] text-center leading-[56rpx] text-[24rpx] border-[2rpx] border-solid !rounded-[100rpx] text-[#333] truncate"
+								:class="{ 'bg-[var(--primary-color-light)] font-500 text-[var(--primary-color)] border-[var(--primary-color)]': index === subActive, 'border-[var(--temp-bg)]  bg-[var(--temp-bg)]': index != subActive }"
+								v-for="(item, index) in tabsData[tabActive]?.child_list"
+								:key="tabsData[tabActive].category_id" @click="subMenuClick(index, item)">{{ item.category_name }}</text>
+						</view>
+					</u-popup>
+				</view>
+				<view class="flex justify-center flex-wrap pl-[168rpx] pt-[20rpx] pb-[20rpx]"
+					:class="{ '!pt-[214rpx]': config.search.control && tabsData[tabActive]?.child_list && tabsData[tabActive]?.child_list.length, 'pt-[120rpx]': config.search.control && (!tabsData[tabActive].child_list || !tabsData[tabActive].child_list.length), 'pt-[118rpx]': tabsData[tabActive]?.child_list && tabsData[tabActive]?.child_list.length && !config.search.control }">
+					<template v-for="(item, index) in list" :key="item.goods_id">
+						<view
+							class="w-[536rpx] box-border bg-white w-full flex mx-[20rpx] py-[24rpx] px-[20rpx] rounded-[var(--rounded-small)]"
+							:class="{ 'mt-[20rpx]': index }" @click.stop="toLink(item.goods_id)">
+							<view class="w-[168rpx] h-[168rpx] flex items-center justify-center mr-[20rpx] rounded-[var(--goods-rounded-small)] overflow-hidden">
+								<u--image width="168rpx" height="168rpx" :radius="'var(--goods-rounded-small)'" :src="img( item.goods_cover_thumb_mid || '')" model="aspectFill">
+									<template #error>
+										<image class="w-[168rpx] h-[168rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+							</view>
+							<view class="flex flex-1 flex-wrap flex-col">
+								<view class="max-h-[80rpx] text-[26rpx] leading-[40rpx] multi-hidden">
+									{{ item.goods_name }}</view>
+								<view class="flex  items-end justify-between flex-1">
+									<view class="text-[var(--price-text-color)] price-font -mb-[8rpx]">
+										<text class="text-[24rpx] font-500">￥</text>
+										<text class="text-[40rpx] font-500">{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[0] }}</text>
+										<text class="text-[24rpx] font-500">.{{ parseFloat(goodsPrice(item)).toFixed(2).split('.')[1] }}</text>
+										<image class="h-[24rpx] max-w-[46rpx] ml-[6rpx]" v-if="priceType(item) == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+									</view>
+									<block v-if="!item.isMaxBuy">
+										<view
+											v-if="(item.goods_type == 'real' || (item.goods_type == 'virtual' && item.virtual_receive_type != 'verify')) &&
+											item.goodsSku.sku_spec_format === '' && cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id] && config.cart.control && config.cart.event === 'cart'"
+											class="flex items-center">
+											<view class="relative w-[32rpx] h-[32rpx]">
+												<text class="text-[32rpx] text-color nc-iconfont nc-icon-jianshaoV6xx absolute flex items-center justify-center -left-[12rpx] -bottom-[14rpx] -right-[14rpx] -top-[14rpx]" @click.stop="reduceCart(item,cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id])"></text>
+											</view>
+											<text class="text-[#333] text-[24rpx] mx-[16rpx]">{{ cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id].num }}</text>
+											<view class="relative w-[32rpx] h-[32rpx]">
+												<text class="text-[32rpx] text-color iconfont iconjiahao2fill absolute flex items-center justify-center -left-[14rpx] -bottom-[14rpx] -right-[14rpx] -top-[14rpx]" :id="'itemCart' + index" @click.stop="addCartBtn(item,cartList['goods_' + item.goods_id]['sku_' + item.goodsSku.sku_id], 'itemCart' + index)"></text>
+											</view>
+										</view>
+										<template v-else-if="(item.goods_type == 'virtual' && config.cart.event !== 'cart') || item.goods_type == 'real'">
+											<view v-if="config.cart.control && config.cart.style === 'style-1'" class="h-[44rpx] relative  pl-[20rpx]">
+												<view :id="'itemCart' + index"
+													class="w-[102rpx] box-border text-center text-[#fff] primary-btn-bg h-[46rpx] text-[22rpx] leading-[46rpx] rounded-[100rpx]"
+													@click.stop="itemCart(item, 'itemCart' + index)">
+													{{ config.cart.text }}
+												</view>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-16rpx] top-[-16rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+											<view v-if="config.cart.control && config.cart.style === 'style-2'" class="w-[50rpx] h-[50rpx] relative" @click.stop="itemCart(item, 'itemCart' + index)">
+												<text :id="'itemCart' + index"
+													class="text-color nc-iconfont nc-icon-tianjiaV6xx text-[44rpx]"></text>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-16rpx] top-[-16rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+											<view v-if="config.cart.control && config.cart.style === 'style-3'" class="w-[50rpx] h-[50rpx] flex justify-center items-end  relative" @click.stop="itemCart(item, 'itemCart' + index)">
+												<text :id="'itemCart' + index"
+													class="text-color nc-iconfont nc-icon-gouwucheV6xx6 !text-[34rpx]"></text>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-10rpx] top-[-2rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+											<view v-if="config.cart.control && config.cart.style === 'style-4'" class="w-[50rpx] h-[50rpx] flex items-end relative" @click.stop="itemCart(item, 'itemCart' + index)">
+												<view :id="'itemCart' + index"
+													class=" flex items-center justify-center text-[#fff] bg-color h-[44rpx] w-[44rpx] rounded-[22rpx] text-center">
+													<text class="nc-iconfont nc-icon-gouwucheV6xx6 !text-[26rpx]"></text>
+												</view>
+												<view
+													v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id].totalNum"
+													:class="['absolute right-[-10rpx] top-[-10rpx] rounded-[30rpx] h-[30rpx] min-w-[30rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border border-[2rpx] border-solid border-[#fff]', cartList['goods_' + item.goods_id].totalNum > 9 ? 'px-[10rpx]' : '']">
+													{{ cartList['goods_' + item.goods_id].totalNum }}
+												</view>
+											</view>
+										</template>
+									</block>
+								</view>
+							</view>
+						</view>
+
+					</template>
+					<mescroll-empty class="part" v-if="!list.length && !loading && listLoading" :option="{tip : '暂无商品'}"></mescroll-empty>
+				</view>
+				<add-cart-popup ref="cartRef" />
+			</mescroll-body>
+			<!--  #ifdef  H5 -->
+			<view v-if="config.cart.control && config.cart.event === 'cart'" class="bg-[#fff] z-10 flex justify-between items-center fixed left-0 right-0 bottom-[50px] box-solid px-[24rpx] py-[17rpx] mb-ios border-[0] border-t-[2rpx] border-solid border-[#f6f6f6]">
+				<view class="flex items-center">
+					<view class="w-[66rpx] h-[66rpx] mr-[27rpx] relative">
+						<view id="animation-end" class="w-[66rpx] h-[66rpx] rounded-[35rpx] bg-[var(--primary-color)] text-center leading-[70rpx]" @click.stop="toCart">
+							<text class="nc-iconfont nc-icon-gouwucheV6mm1 text-[#fff] text-[32rpx]"></text>
+						</view>
+						<view v-if="totalNum"
+							class="border-[1rpx] border-solid border-[#fff]"
+							:class="['absolute left-[40rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', totalNum > 9 ? 'px-[10rpx]' : '']">
+							{{ totalNum > 99 ? "99+" : totalNum }}
+						</view>
+					</view>
+					<text class="text-[26rpx] text-[#333]">总计：</text>
+					<view class="text-[var(--price-text-color)] price-font font-bold flex items-baseline">
+						<text class="text-[26rpx] mr-[6rpx]">￥</text>
+						<text class="text-[44rpx]">{{ parseFloat(totalMoney) }}</text>
+					</view>
+				</view>
+				<button class="w-[180rpx] h-[70rpx] text-[26rpx] leading-[70rpx] font-500 m-0 rounded-full remove-border" :class="{'primary-btn-bg !text-[#fff]': parseFloat(totalMoney) > 0, 'bg-[#F7F7F7] !text-[var(--text-color-light9)]': parseFloat(totalMoney) <= 0}" @click="settlement">去结算</button>
+			</view>
+			<!--  #endif -->
+
+			<!-- #ifdef MP-WEIXIN -->
+			<view v-if="config.cart.control && config.cart.event === 'cart'"
+				class="bg-[#fff] z-10 flex justify-between items-center fixed left-0 right-0 bottom-[100rpx] box-solid px-[24rpx] py-[17rpx] mb-ios border-[0] border-t-[2rpx] border-solid border-[#f6f6f6]">
+				<view class="flex items-center">
+					<view class="w-[66rpx] h-[66rpx] mr-[27rpx] relative">
+						<view id="animation-end" class="w-[66rpx] h-[66rpx] rounded-[35rpx] bg-[var(--primary-color)] text-center leading-[66rpx]" @click.stop="toCart">
+							<text class="nc-iconfont nc-icon-gouwucheV6mm1 text-[#fff] text-[32rpx]"></text>
+						</view>
+						<view v-if="totalNum"
+							class="border-[1rpx] border-solid border-[#fff]"
+							:class="['absolute left-[40rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[26rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', totalNum > 9 ? 'px-[10rpx]' : '']">
+							{{ totalNum > 99 ? "99+" : totalNum }}
+						</view>
+					</view>
+					<text class="text-[26rpx] text-[#333]">总计：</text>
+					<view class="text-[var(--price-text-color)] price-font font-bold inline-block">
+						<text class="text-[26rpx] mr-[6rpx]">￥</text>
+						<text class="text-[44rpx]">{{ parseFloat(totalMoney) }}</text>
+					</view>
+				</view>
+				<button v-if="isBindMobile && userInfo && !userInfo.mobile" class="w-[180rpx] h-[70rpx] text-[26rpx] leading-[70rpx] font-500 m-0 rounded-full remove-border"  :class="{'primary-btn-bg !text-[#fff]': parseFloat(totalMoney) > 0, 'bg-[#F7F7F7] !text-[var(--text-color-light9)]': parseFloat(totalMoney) <= 0}" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">去结算</button>
+				<button v-else class="w-[180rpx] h-[70rpx] text-[26rpx] leading-[70rpx] font-500 m-0 rounded-full remove-border"  :class="{'primary-btn-bg !text-[#fff]': parseFloat(totalMoney) > 0, 'bg-[#F7F7F7] !text-[var(--text-color-light9)]': parseFloat(totalMoney) <= 0}" @click="settlement">去结算</button>
+			</view>
+			<!--  #endif -->
+		</view>
+
+		<view v-show="animationElStatus" :style="animationElStatus"
+			class="fixed z-999 flex items-center justify-center text-[#fff] bg-color h-[44rpx] w-[44rpx] rounded-[22rpx] text-center">
+			<text class=" nc-iconfont nc-icon-gouwucheV6xx6 !text-[30rpx]"></text>
+		</view>
+		<view class="flex justify-center items-center w-[100%]" v-if="!tabsData.length && !loading">
+			<mescroll-empty :option="{tip : '暂无商品分类'}"></mescroll-empty>
+		</view>
+		<loading-page :loading="loading"></loading-page>
+		<tabbar />
+		<!-- 强制绑定手机号 -->
+		<bind-mobile ref="bindMobileRef" />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, getCurrentInstance } from 'vue';
+import { t } from '@/locale';
+import { img, redirect, getToken } from '@/utils/common';
+import { getGoodsCategoryTree, getGoodsPages } from '@/addon/shop/api/goods';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import addCartPopup from './add-cart-popup.vue'
+import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+import { useLogin } from '@/hooks/useLogin'
+import useMemberStore from '@/stores/member'
+import useCartStore from '@/addon/shop/stores/cart'
+import { cloneDeep } from 'lodash-es'
+
+const instance = getCurrentInstance(); // 获取组件实例
+const cartStore = useCartStore();
+// 查询购物车列表
+cartStore.getList();
+
+const cartList = computed(() => cartStore.cartList)
+const totalNum = computed(() => cartStore.totalNum)
+const totalMoney = computed(() => cartStore.totalMoney)
+const memberStore = useMemberStore()
+const userInfo = computed(() => memberStore.info)
+const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const prop = defineProps({
+	config: {
+		type: Object,
+		default: (() => { return {} })
+	},
+    categoryId:{
+        type:[String,Number],
+        default:0
+    }
+})
+let config = prop.config
+let categoryId = prop.categoryId;
+const list = ref<Array<Object>>([]);
+const searchName = ref("");
+const loading = ref<boolean>(true);//页面加载动画
+const listLoading = ref<boolean>(false);//列表加载动画
+const labelPopup = ref<boolean>(false)
+const cartData = ref<Array<any>>([])
+cartData.value = uni.getStorageSync('shopCart') || []
+interface acceptingDataStructure {
+	data: acceptingDataItemStructure,
+	msg: string,
+	code: number
+}
+interface acceptingDataItemStructure {
+	data: object,
+	[propName: string]: number | string | object
+}
+interface mescrollStructure {
+	num: number,
+	size: number,
+	endSuccess: Function,
+	[propName: string]: any
+}
+const getListFn = (mescroll: mescrollStructure) => {
+	listLoading.value = false
+	getGoodsPages({
+		page: mescroll.num,
+		limit: mescroll.size,
+		goods_category: categoryId, // 商品分类id
+	}).then((res: any) => {
+		let newArr = res.data.data
+		//设置列表数据
+		if (mescroll.num == 1) {
+			list.value = []; //如果是第一页需手动制空列表
+		}
+		list.value = list.value.concat(newArr);
+		// 商品限购
+		goodsMaxBuy();
+		loading.value = false;
+		mescroll.endSuccess(newArr.length);
+		if (!list.value.length) listLoading.value = true
+	}).catch(() => {
+		loading.value = false;
+		listLoading.value = true
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+const goodsMaxBuy = ()=>{
+	list.value.forEach((data,index)=>{
+		data.isMaxBuy = false;
+
+		let maxBuyNum = -1;
+		// 限购 - 是否开启限购
+		if(data.is_limit){
+			if(data.max_buy){
+				let max_buy = 0;
+				if(data.limit_type == 1){ //单次限购
+					max_buy = data.max_buy;
+				}else{ // 单人限购
+					let buyVal = data.max_buy - (data.has_buy||0);
+					max_buy = buyVal > 0 ? buyVal : 0;
+				}
+
+				if(max_buy > data.stock){
+					maxBuyNum = data.stock
+				}else if(max_buy <= data.stock){
+					maxBuyNum = max_buy;
+				}
+			}
+		}
+		if(maxBuyNum == 0){
+			data.isMaxBuy = true;
+		}
+	})
+}
+
+const toLink = (goods_id: string) => {
+	redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id } })
+}
+
+onMounted(() => {
+	getCategoryData()
+})
+
+//设置购物车动画
+const animationElStatus = ref('')
+const animationAddRepeatFlag = ref<Boolean>(false)
+const cartRepeatFlag = ref<Boolean>(false)
+const animationAddCart = (row: any, id: any) => {
+	if (animationAddRepeatFlag.value || cartRepeatFlag.value) return false
+	animationAddRepeatFlag.value = true
+	cartRepeatFlag.value = true
+
+	let obj: any = {
+		goods_id: row.goodsSku.goods_id,
+		sku_id: row.goodsSku.sku_id,
+		sale_price: goodsPrice(row),
+		stock: row.goodsSku.stock
+	};
+	if (row.id) {
+		obj.num = row.num;
+		obj.id = row.id;
+	}
+
+	// 起购
+	let num = 1;
+	if(row.min_buy > 0 && !row.num){
+		num = row.min_buy;
+	}else{
+		num = 1;
+	}
+
+	cartStore.increase(obj, num, () => {
+		cartRepeatFlag.value = false
+	});
+	// #ifdef  MP-WEIXIN
+	setTimeout(() => {
+		uni.createSelectorQuery().in(instance).select('#animation-end').boundingClientRect((res: any) => {
+			uni.createSelectorQuery().in(instance).select('#' + id).boundingClientRect((position: any) => {
+				animationElStatus.value = `top: ${ position.top }px; left: ${ position.left }px;`
+				setTimeout(() => {
+					animationElStatus.value = `top: ${ res.top + res.height / 2 - position.height / 3 }px; left: ${ res.left + res.width / 2 - position.width / 3 }px; transition: all 0.8s; transform: rotate(-720deg);`
+				}, 20);
+
+				setTimeout(() => {
+					animationElStatus.value = ''
+					animationAddRepeatFlag.value = false
+				}, 1020);
+
+			}).exec()
+
+		}).exec()
+	}, 100)
+	// #endif
+	// #ifdef  H5
+	setTimeout(() => {
+		const animationEnd: any = window.document.getElementById('animation-end');
+		const animationEndLeft = animationEnd.getBoundingClientRect().left;
+		const animationEndTop = animationEnd.getBoundingClientRect().top;
+
+		const itemCart: any = window.document.getElementById(id);
+		const itemCartLift = itemCart.getBoundingClientRect().left;
+		const itemCartTop = itemCart.getBoundingClientRect().top;
+		animationElStatus.value = `top: ${ itemCartTop }px; left: ${ itemCartLift }px;`
+
+		setTimeout(() => {
+			animationElStatus.value = `top: ${ animationEndTop + animationEnd.offsetHeight / 2 - itemCart.offsetHeight / 3 }px; left: ${ animationEndLeft + animationEnd.offsetWidth / 2 - itemCart.offsetHeight / 3 }px; transition: all 0.8s; transform: rotate(-720deg);`
+		}, 20);
+		setTimeout(() => {
+			animationElStatus.value = ''
+			animationAddRepeatFlag.value = false
+		}, 1020);
+
+	}, 100);
+	// #endif
+}
+
+/**
+ * 获取购物车数据
+ * @description 获取分类数据
+ * */
+const initAll = ref({
+	allActive : -1,
+	data: { category_name: "全部", category_id: '' }
+})
+const tabsData:any = ref<Array<Object>>([])
+const getCategoryData = () => {
+	loading.value = true;
+	getGoodsCategoryTree().then((res: any) => {
+		tabsData.value = res.data;
+		for (let i = 0; i < tabsData.value.length; i++) {
+			if(tabsData.value[i].child_list){
+				let obj = {
+					category_name: "全部",
+					category_id: tabsData.value[i].category_id
+				};
+				tabsData.value[i].child_list.unshift(obj)
+			}
+		}
+        if (categoryId) {
+            for (let i = 0; i < tabsData.value.length; i++) {
+                if (tabsData.value[i].category_id == categoryId) {
+                    tabActive.value = i;
+                    break;
+                }
+                if(tabsData.value[i].child_list){
+                    for(let k=0;k<tabsData.value[i].child_list.length;k++){
+                        if(tabsData.value[i].child_list[k].category_id == categoryId){
+                            tabActive.value = i;
+                            subActive.value = k;
+                            break;
+                        }
+                    }
+                }
+            }
+        }else{
+            categoryId = res.data[0].category_id;
+        }
+		loading.value = false;
+	}).catch(() => {
+		loading.value = false;
+	});
+}
+
+// 一级菜单样式控制
+const tabActive = ref<number>(0)
+// 二级菜单样式控制
+const subActive = ref<number>(0)
+
+// 一级菜单点击事件
+const firstLevelClick = (index: number, data: any) => {
+	tabActive.value = index;
+	if (data.child_list && data.child_list.length) {
+		subMenuClick(0, data.child_list[0]);
+	} else {
+        categoryId = data.category_id;
+		list.value = [];
+		getMescroll().resetUpScroll();
+	}
+}
+
+/**
+ * @description 二级菜单点击事件
+ * @param {number} index
+ * @param {Object} data
+ * */
+const subMenuClick = (index: number, data: any) => {
+	subActive.value = index;
+    categoryId = data.category_id;
+	labelPopup.value = false
+	list.value = [];
+	getMescroll().resetUpScroll();
+}
+
+// 搜索名字
+const searchNameFn = () => {
+	// getMescroll().resetUpScroll();
+	if(searchName.value) redirect({ url: '/addon/shop/pages/goods/list', param: { goods_name: encodeURIComponent(searchName.value) } })
+}
+
+//点击商品购物车按钮
+const cartRef = ref()
+const itemCart = (row: any, id: any) => {
+    // 虚拟商品，并且需要核销，禁止加入购物车
+    if (row.goods_type == 'virtual' && row.virtual_receive_type == 'verify') {
+        return toLink(row.goodsSku.goods_id)
+    }
+
+    if (config.cart.event !== 'cart') {
+        return toLink(row.goods_id)
+    }
+
+    if (!userInfo.value) {
+        useLogin().setLoginBack({url: '/addon/shop/pages/goods/category'})
+        return false
+    }
+	
+    if (row.goodsSku.sku_spec_format) {
+        cartRef.value.open(row.goodsSku.sku_id)
+    } else {
+        //单规格添加购物车
+		if (!row.goodsSku.stock || parseInt(row.goodsSku.num||0) > parseInt(row.goodsSku.stock)) {
+		    uni.showToast({ title: '商品库存不足', icon: 'none' })
+		    return;
+		}
+		if(row.min_buy && row.min_buy > parseInt(row.stock)){
+			uni.showToast({ title: '商品库存小于起购数量', icon: 'none' })
+			return;
+		}
+        animationAddCart(row, id)
+    }
+}
+
+//点击购物车加号 添加数量
+const addCartBtn = (item: any, row: any, id: string) => {
+    if (parseInt(row.num) >= parseInt(row.stock)) {
+        uni.showToast({ title: '商品库存不足', icon: 'none' })
+        return;
+    }
+
+	// 起购
+	let num = row.num;
+	if(item.min_buy > 0 && item.min_buy > row.num){
+		num = item.min_buy;
+	}
+
+	/************** 限购-start *****************/
+	let maxBuyNum = -1;
+	// 限购 - 是否开启限购
+	if(item.is_limit && item.max_buy){
+		let max_buy = 0;
+		if(item.limit_type == 1){ //单次限购
+			max_buy = item.max_buy;
+		}else{ // 单人限购
+			let buyVal = item.max_buy - (item.has_buy||0);
+			max_buy = buyVal > 0 ? buyVal : 0;
+		}
+
+		if(max_buy > item.goodsSku.stock){
+			maxBuyNum = item.goodsSku.stock
+		}else if(max_buy <= item.goodsSku.stock){
+			maxBuyNum = max_buy;
+		}
+	}
+	if(item.is_limit && num >= item.max_buy){
+		let tips = `该商品单次限购${item.max_buy}件`;
+		if(item.limit_type != 1){ //单次限购
+			tips = `该商品每人限购${item.max_buy}件`;
+		}
+		uni.showToast({ title: tips, icon: 'none' })
+		return false;
+	}
+	/************** 限购-end *****************/
+
+    let obj = cloneDeep(item)
+    obj.num = num;
+    obj.id = row.id;
+    animationAddCart(obj, id)
+}
+
+//点击购物车减号
+const reduceCart = (data: any,row: any) => {
+	if(cartRepeatFlag.value) return false
+	cartRepeatFlag.value = true
+
+	let reduceNum = 1;
+	if(data.min_buy > 0 && data.min_buy == row.num){
+		reduceNum = data.min_buy;
+	}
+
+	cartStore.reduce({
+		id: row.id,
+		goods_id: row.goods_id,
+		sku_id: row.sku_id,
+		stock: row.stock,
+		sale_price: row.sale_price,
+		num: row.num
+	}, reduceNum, () => {
+		cartRepeatFlag.value = false
+	})
+
+}
+
+//进入购物车
+const toCart = () => {
+	redirect({ url: '/addon/shop/pages/goods/cart' })
+}
+
+//强制绑定手机号
+const bindMobileRef: any = ref(null)
+const isBindMobile = ref(uni.getStorageSync('isbindmobile'))
+
+/**
+ * 结算
+ */
+const settlement = () => {
+
+	// #ifdef H5
+	// 绑定手机号
+	if(uni.getStorageSync('isbindmobile')){
+		bindMobileRef.value.open()
+		return false
+	}
+	// #endif
+
+    if (!totalNum.value) {
+        uni.showToast({ title: '还没有选择商品', icon: 'none' })
+        return
+    }
+    const cart_ids: any = []
+    Object.values(cartList.value).forEach(item => {
+        Object.keys(item).forEach(v => {
+            if (v != 'totalNum' && v != 'totalMoney') cart_ids.push(item[v].id)
+        })
+    })
+	if(cart_ids.length == 0){
+		return;
+	}
+    uni.setStorage({
+        key: 'orderCreateData',
+        data: { cart_ids },
+        success() {
+            redirect({ url: '/addon/shop/pages/order/payment' })
+        }
+    })
+}
+
+// 价格类型
+const priceType = (data:any) =>{
+	let type = "";
+    if(data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
+        type = 'member_price' // 会员价
+    }
+    return type;
+}
+
+// 商品价格
+const goodsPrice = (data:any) => {
+    let price = "0.00";
+    if (data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
+        price = data.goodsSku.member_price ? data.goodsSku.member_price : data.goodsSku.price // 会员价
+    } else {
+        price = data.goodsSku.price
+    }
+    return price;
+}
+</script>
+
+<style lang="scss" scoped>
+.remove-border {
+	&::after {
+		border: none;
+	}
+}
+.border-color {
+	border-color: var(--primary-color) !important;
+}
+
+.text-color {
+	color: var(--primary-color) !important;
+}
+
+.bg-color {
+	background-color: var(--primary-color) !important;
+}
+
+.class-select {
+	position: relative;
+	font-weight: bold;
+
+	&::before {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		height: 6rpx;
+		background-color: $u-primary;
+		width: 90%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.list-select {
+	position: relative;
+	margin-right: 28rpx;
+
+	&::before {
+		content: "";
+		position: absolute;
+		background-color: #999;
+		width: 2rpx;
+		height: 70%;
+		top: 50%;
+		right: -14rpx;
+		transform: translatey(-50%);
+	}
+}
+
+.transform-rotate {
+	transform: rotate(180deg);
+}
+
+.text-color {
+	color: $u-primary;
+}
+.border-color {
+	border-color: $u-primary;
+}
+.bg-color {
+	background-color: $u-primary;
+}
+
+// search input
+.search-box {
+	display: flex;
+	align-items: center;
+	padding: 0 30rpx;
+}
+
+.search-box .search-ipt {
+	height: 58rpx;
+	background-color: #F6F8F8;
+	border-radius: 33rpx;
+}
+
+.search-box .search-ipt .input-placeholder {
+	color: #A5A6A6;
+}
+
+.tabs-box {
+	width: 168rpx;
+	font-size: 26rpx;
+}
+
+.tabs-box .tab-item {
+	display: flex;
+	align-items: center;
+	min-height: 56rpx;
+	padding: 20rpx 0;
+	background-color: #fff;
+}
+.tabs-box .tab-item-active {
+	position: relative;
+	color: var(--primary-color);
+	background-color:#f6f6f6;
+	&::before {
+		display: inline-block;
+		position: absolute;
+		left: 0rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		content: '';
+		width: 6rpx;
+		height: 48rpx;
+		background-color: var(--primary-color);
+	}
+
+	&::after {
+		display: inline-block;
+		position: absolute;
+		left: 0rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		content: '';
+		width: 6rpx;
+		height: 48rpx;
+		background-color: var(--primary-color);
+	}
+}
+
+/*  #ifdef  H5  */
+.category .labelPopup :deep(.u-transition) {
+	top: 92rpx !important;
+	left: 168rpx !important;
+	z-index: 8 !important;
+}
+
+.category .labelPopup.active :deep(.u-transition) {
+	top: 192rpx !important;
+}
+
+/*  #endif  */
+
+.scroll-height{
+	height: 100%;
+}
+/*  #ifdef  H5  */
+.cart{
+	.child.noData1{
+		height: calc(100vh - 146rpx - 92rpx - 100rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 92rpx - 100rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.child.noData2{
+		height: calc(100vh - 40rpx - 92rpx - 100rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 92rpx - 100rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.noChild.noData1{
+		height: calc(100vh - 146rpx - 100rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 100rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.noChild.noData2{
+		height: calc(100vh - 40rpx - 100rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 100rpx - 50px - env(safe-area-inset-bottom));
+	}
+}
+.detail{
+	.child.noData1{
+		height: calc(100vh - 146rpx - 92rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 92rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.child.noData2{
+		height: calc(100vh - 40rpx - 92rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 92rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.noChild.noData1{
+		height: calc(100vh - 146rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 50px - env(safe-area-inset-bottom));
+	}
+	.noChild.noData2{
+		height: calc(100vh - 40rpx - 50px - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 50px - env(safe-area-inset-bottom));
+	}
+}
+/*  #endif  */
+/*  #ifndef  H5  */
+.cart{
+	.child.noData1{
+		height: calc(100vh - 146rpx - 92rpx - 100rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 92rpx - 100rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.child.noData2{
+		height: calc(100vh - 40rpx - 92rpx - 100rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 92rpx - 100rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.noChild.noData1{
+		height: calc(100vh - 146rpx - 100rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 100rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.noChild.noData2{
+		height: calc(100vh - 40rpx - 100rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 100rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+}
+.detail{
+	.child.noData1{
+		height: calc(100vh - 146rpx - 92rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 92rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.child.noData2{
+		height: calc(100vh - 40rpx - 92rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 92rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.noChild.noData1{
+		height: calc(100vh - 146rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 146rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+	.noChild.noData2{
+		height: calc(100vh - 40rpx - 100rpx - constant(safe-area-inset-bottom));
+		height: calc(100vh - 40rpx - 100rpx - env(safe-area-inset-bottom));
+	}
+}
+/*  #endif  */
+.mescroll-empty.empty-page.part{
+	width: 542rpx;
+	height: 542rpx;
+	margin: 0;
+	padding-top: 50rpx;
+	.img{
+		width: 160rpx !important;
+		height: 120rpx !important;
+	}
+}
+</style>
diff --git a/src/addon/shop/pages/goods/detail.vue b/src/addon/shop/pages/goods/detail.vue
new file mode 100644
index 0000000..afc584b
--- /dev/null
+++ b/src/addon/shop/pages/goods/detail.vue
@@ -0,0 +1,1011 @@
+<template>
+	<view :style="themeColor()">
+		<view class="bg-[var(--page-bg-color)] min-h-[100vh] relative" v-if="Object.keys(goodsDetail).length">
+			<!-- 自定义头部 -->
+			<view class="flex items-center fixed left-0 right-0 z-10 bg-transparent detail-head" :class="{'!bg-[#fff]' :detailHeadBgChange}" :style="navbarInnerStyle">
+				<text class="nc-iconfont nc-icon-zuoV6xx" :style="navbarInnerArrowStyle" @click="backToPrevious()"></text>
+				<view class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] bg-[rgba(255,255,255,.4)] rounded-full border-[2rpx] border-solid border-transparent box-border nc-iconfont nc-icon-fenxiangV6xx font-bold text-[#303133] text-[36rpx]" :class="{'border-[#d8d8d8]': detailHeadBgChange}"  @click="openShareFn"></view>
+			</view>
+
+			<view class="w-full h-[100vw] relative overflow-hidden">
+				<view class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
+					:class="{'translate-x-0':switchMedia === 'img','translate-x-full':switchMedia != 'img'}">
+					<u-swiper :list="goodsDetail.goods.goods_image" :indicator="goodsDetail.goods.goods_image.length" :indicatorStyle="{'bottom': '70rpx'}" :autoplay="switchMedia === 'img'?true:false" height="100vw" radius="0" @click="swiperClick"></u-swiper>
+				</view>
+				<!-- <view class="media-mode absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
+					:class="{'translate-x-0':switchMedia === 'video','-translate-x-full':switchMedia != 'video'}">
+					<video id="goodsVideo" class="w-full h-full" :src="img(goodsDetail.goods.goods_video)" :poster="img(goodsDetail.goods.goods_cover_thumb_mid)" objectFit="cover"></video>
+				</view> -->
+				<!-- 切换视频、图片 -->
+				<!-- <view class="media-mode absolute bottom-[74rpx] w-full text-center leading-[50rpx] " v-if="goodsDetail.goods.goods_video != ''">
+				    <text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'video' }" @click="switchMedia = 'video'">视频</text>
+				    <text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'img' }" @click="(switchMedia = 'img'), videoContext.pause()">图片</text>
+				</view> -->
+			</view>
+			<view v-if="priceType != ''" class="rounded-t-[40rpx] -mt-[44rpx] relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]" :style="{ background: 'url(' + img('addon/shop/detail/discount_price_bg.png') + ') no-repeat'}">
+				<view class="text-[#fff]">
+					<text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]" v-if="priceType == 'newcomer_price'">新人价</text>
+					<text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]" v-else-if="priceType == 'discount_price'">折扣价</text>
+					<text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]" v-else-if="priceType == 'member_price'">会员价</text>
+					<view class="inline-block mr-[14rpx]">
+						<text class="text-[32rpx] price-font mr-[4rpx]">￥</text>
+						<text class="text-[48rpx] -mb-[4rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
+						<text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
+					</view>
+					<view class="inline-block">
+						<text class="text-[26rpx] mr-[6rpx]" v-if="goodsDetail.price">售价:</text>
+						<text class="text-[26rpx] price-font leading-[36rpx]">￥{{ goodsDetail.price }}</text>
+					</view>
+				</view>
+				<view v-if="priceType == 'discount_price'" class="flex flex-col text-[#fff] items-end h-[59rpx] justify-between">
+					<image class="h-[28rpx] w-[auto] mr-[2rpx]" :src="img('addon/shop/detail/discount_price.png')" mode="heightFix"></image>
+					<view class="flex items-center text-[24rpx] -mb-[10rpx] overflow-hidden h-[28rpx]">
+						<text class="mr-[4rpx] whitespace-nowrap">距结束</text>
+						<up-count-down class="text-[#fff] text-[28rpx]" :time="discountTime" format="DD:HH:mm:ss" @change="onChange">
+							<view class="flex">
+								<view class="text-[24rpx] flex items-center" v-if="timeData.days>0">
+									<text>{{ timeData.days }}</text>
+									<text class="ml-[4rpx] text-[20rpx]">天</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="min-w-[30rpx] text-center" v-if="timeData.hours">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
+									<text class="min-w-[30rpx] text-center" v-else>00</text>
+									<text class="text-[20rpx]">时</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="min-w-[30rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes : '0'+timeData.minutes }}</text>
+									<text class="text-[20rpx]">分</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="min-w-[30rpx] text-center">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
+									<text class="text-[20rpx]">秒</text>
+								</view>
+							</view>
+						</up-count-down>
+					</view>
+				</view>
+			</view>
+			<view class="bg-[var(--page-bg-color)] rounded-[40rpx] overflow-hidden -mt-[34rpx] relative">
+				<view class="datail-title relative px-[30rpx]" :class="{'pt-[40rpx]': priceType != '','pt-[30rpx]': priceType == ''}">
+					<view class="text-[var(--price-text-color)] flex items-baseline mb-[12rpx]" v-if="priceType === ''">
+						<view class="inline-block goods-price-time">
+							<text class="price-font text-[32rpx]">￥</text>
+							<text class="price-font text-[48rpx]">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
+							<text class="price-font text-[32rpx] mr-[10rpx]">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
+						</view>
+						<!-- <text class="text-[26rpx] text-[var(--text-color-light9)] line-through price-font" v-if="goodsDetail.market_price && parseFloat(goodsDetail.market_price)">
+							￥{{ goodsDetail.market_price }}
+						</text> -->
+					</view>
+					<view class="text-[#333] font-medium text-[30rpx] multi-hidden leading-[40rpx]">
+						<view class="brand-tag middle" v-if="goodsDetail.goods.goods_brand">
+							{{goodsDetail.goods.goods_brand.brand_name}}
+						</view>
+						{{ goodsDetail.goods.goods_name }}
+					</view>
+					<view class="flex justify-between items-start mt-[24rpx]">
+						<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]" v-if="goodsDetail.market_price && parseFloat(goodsDetail.market_price)">
+							<text class="whitespace-nowrap mr-[4rpx]">划线价:</text>
+							<text class="line-through">￥{{ goodsDetail.market_price }}</text>
+						</view>
+						<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]">
+							<text class="whitespace-nowrap mr-[4rpx]">库存:</text>
+							<text class="">{{ goodsDetail.stock }}</text>
+							<text class="">{{ goodsDetail.goods.unit }}</text>
+						</view>
+						<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)] flex items-baseline">
+							<text class="whitespace-nowrap mr-[4rpx]">销量:</text>
+							<text class="mx-[2rpx]">{{ goodsDetail.goods.sale_num }}</text>
+							<text class="">{{ goodsDetail.goods.unit }}</text>
+						</view>
+					</view>
+					<view class="flex flex-wrap mt-[16rpx]" v-if="goodsDetail.label_info && goodsDetail.label_info.length">
+						<block v-for="item in goodsDetail.label_info" :key="item.label_id">
+							<image class="img-tag middle" v-if="item.style_type == 'icon' && item.icon" :src="img(item.icon)" mode="heightFix" @error="diyGoods.error(item,'icon')"></image>
+							<view class="base-tag middle" v-else-if="item.style_type == 'diy' || !item.icon" :style="diyGoods.baseTagStyle(item)">
+								{{item.label_name}}
+							</view>
+						</block>
+					</view>
+				</view>
+				<view class="mt-[24rpx] sidebar-margin card-template" v-if="isGoodsPropertyTemp">
+					<view @click="servicesDataShow = !servicesDataShow" v-if="goodsDetail.service && goodsDetail.service.length" class="card-template-item">
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">服务</text>
+						<view class="text-[#343434] text-[26rpx] leading-[30rpx] font-400 truncate ml-auto">
+							{{ goodsDetail.service[0].service_name }}
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+					<view @click="buyFn" v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length" class="card-template-item">
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">已选</text>
+						<view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">
+							{{ goodsDetail.sku_spec_format }}
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+					<view class="card-template-item" @click="distributionDataOpen" v-if="goodsDetail.goods.goods_type == 'real'&&goodsDetail.delivery_type_list&&goodsDetail.delivery_type_list.length">
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">配送</text>
+						<view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
+							{{ goodsDetail.delivery_type_list[selectDeliveryType].name }}
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+					<view @click="couponListShow = true" v-if="couponList.length" class="card-template-item">
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">领券</text>
+						<view class="ml-auto flex-1 flex-nowrap flex items-center overflow-hidden h-[44rpx] content-between">
+							<block v-for="(item, index) in couponList" :key="index">
+								<text v-if="index < 3" class="tag-item whitespace-nowrap border-[2rpx] px-[6rpx] h-[40rpx] border-solid border-[var(--primary-color)] text-[var(--primary-color)] mt-[4rpx]" :class="{'mr-[12rpx]': couponList.length != (index+1) && index < 2, 'ml-auto': index == 0}">
+									{{ item.title }}
+								</text>
+							</block>
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+					<view class="card-template-item" @click="manjianOpenFn" v-if="Object.keys(manjianData).length">
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">优惠</text>
+						<view class="ml-auto flex-1 flex-nowrap flex items-center overflow-hidden h-[44rpx] justify-end">
+							<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx]	text-[22rpx] flex items-center justify-center w-[86rpx] h-[34rpx] mr-[6rpx]">满减送</view>
+							<view class="truncate max-w-[430rpx] text-[26rpx]">{{manjianData.name}}</view>
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+				</view>
+
+				<view v-if="goodsDetail.evaluate_is_show" class="mt-[var(--top-m)] sidebar-margin card-template">
+					<view class="flex items-center justify-between min-h-[40rpx]" :class="{'mb-[30rpx]': evaluate && evaluate.list && evaluate.list.length}">
+						<text class="title !mb-[0]">宝贝评价({{ evaluate.count }})</text>
+						<view v-if="evaluate.count" class="h-[40rpx] flex items-center" @click="toLink(goodsDetail.goods_id)">
+							<text class="text-[24rpx] text-[var(--text-color-light9)]">查看全部</text>
+							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+						</view>
+						<text v-if="!evaluate.count" class="text-[24rpx] text-[var(--text-color-light6)]">暂无评价</text>
+					</view>
+					<view>
+						<view :class="{'pb-[34rpx]': index != (evaluate.list.length-1)}" v-for="(item, index) in evaluate.list" :key="index">
+							<view class="flex items-center w-full">
+								<u-avatar :default-url="img('static/resource/images/default_headimg.png')" :src="img(item.member_head)" :size="'50rpx'" leftIcon="none" />
+								<text class="ml-[10rpx] text-[28rpx] text-[#333]">{{ item.member_name }}</text>
+							</view>
+							<view class="flex justify-between w-full mt-[16rpx]">
+								<view class="flex-1 w-[540rpx] text-[26rpx] text-[#333] max-h-[72rpx] leading-[36rpx] multi-hidden mr-[50rpx]">{{ item.content }}</view>
+								<view class="w-[80rpx] shrink-0">
+									<u--image v-if="item.image_mid && item.image_mid.length" width="80rpx" height="80rpx" radius="var(--goods-rounded-mid)" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+										<template #error>
+											<u-icon name="photo" color="#999" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="my-[var(--top-m)] goods-sku sidebar-margin card-template" v-if="goodsDetail.goods && goodsDetail.goods.attr_format && Object.keys(goodsDetail.goods.attr_format).length">
+					<view class="title mb-[30rpx]">商品属性</view>
+					<view>
+						<block v-for="(item,index) in goodsDetail.goods.attr_format" :key="index">
+							<view v-if="index < 4 || isAttrFormatShow" class="card-template-item">
+								<text class="text-[26rpx] leading-[30rpx] w-[160rpx] font-400 shrink-0 text-[var(--text-color-light9)]">{{item.attr_value_name}}</text>
+								<view class="text-[#333] box-border value-wid text-[26rpx] leading-[30rpx] font-400 truncate pl-[20rpx]">
+									{{Array.isArray(item.attr_child_value_name) ? item.attr_child_value_name.join(',') : item.attr_child_value_name }}
+								</view>
+								<!-- <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text> -->
+							</view>
+						</block>
+						<view v-if="goodsDetail.goods.attr_format.length > 4" class="flex-center" @click="isAttrFormatShow = !isAttrFormatShow">
+							<text class="text-[24rpx] mr-[10rpx]">{{!isAttrFormatShow ? '展开' : '收起'}}</text>
+							<text class="nc-iconfont !text-[22rpx]" :class="{'nc-icon-xiaV6xx': !isAttrFormatShow, 'nc-icon-shangV6xx-1': isAttrFormatShow}"></text>
+						</view>
+					</view>
+				</view>
+
+				<view class="my-[var(--top-m)] sidebar-margin card-template px-[var(--pad-sidebar-m)]">
+					<view class="title">商品详情</view>
+					<view class="u-content">
+						<u-parse :content="goodsDetail.goods.goods_desc" :tagStyle="{img: 'vertical-align: top;',p:'overflow: hidden;word-break:break-word;' }"></u-parse>
+					</view>
+				</view>
+
+				<ns-goods-recommend></ns-goods-recommend>
+
+				<view class="tab-bar-placeholder"></view>
+				<view class="border-[0] border-t-[2rpx] border-solid border-[#f5f5f5] w-[100%] flex justify-between pl-[32rpx] pr-[4rpx] bg-[#fff] box-border fixed left-0 bottom-0 tab-bar z-1 items-center">
+					<view class="flex items-center">
+						<view class="flex flex-col justify-center items-center mr-[38rpx]" @click="redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })">
+							<view class="nc-iconfont nc-icon-shouyeV6xx11 text-[36rpx]"></view>
+							<text class="text-[20rpx] mt-[10rpx]">首页</text>
+						</view>
+						<!-- #ifdef H5 -->
+						<view class="flex flex-col justify-center items-center mr-[38rpx]" @click="redirect({ url: '/addon/shop/pages/goods/cart'})">
+							<view class="iconfont icongouwuche2 text-[38rpx]"></view>
+							<text class="text-[20rpx] mt-[10rpx]">购物车</text>
+						</view>
+						<!-- #endif -->
+						<view class="flex flex-col justify-center items-center mr-[38rpx]" @click="collectFn">
+							<text class="nc-iconfont text-[36rpx]" :class="{'text-[#ff0000] nc-icon-xihuanV6mm': isCollect, 'text-[#303133] nc-icon-guanzhuV6xx' : !isCollect}"></text>
+							<text class="text-[20rpx] mt-[10rpx]">收藏</text>
+						</view>
+
+						<!-- #ifdef MP-WEIXIN -->
+						<view>
+							<nc-contact
+									:send-message-title="sendMessageTitle"
+									:send-message-path="sendMessagePath"
+									:send-message-img="sendMessageImg">
+								<view class="flex flex-col justify-center items-center mr-[38rpx]">
+									<text class="nc-iconfont nc-icon-kefuV6xx-1 text-[36rpx]"></text>
+									<text class="text-[20rpx] mt-[10rpx]">客服</text>
+								</view>
+							</nc-contact>
+						</view>
+						<!-- #endif -->
+					</view>
+					<view class="flex flex-1" v-if="goodsDetail.goods.status == 1">
+						<button v-if="goodsDetail.goods.is_gift"
+							class="!w-[420rpx] flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border"
+							>商品为赠品不可购买</button>
+						<block v-else-if="maxBuy > 0 || maxBuy == -1">
+							<button
+								v-if="goodsDetail.type == '' && (goodsDetail.goods.goods_type == 'real' || (goodsDetail.goods.goods_type == 'virtual' && goodsDetail.goods.virtual_receive_type != 'verify'))"
+								class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
+								style="background: linear-gradient(127deg, #FFB000 0%, #FFA029 100%);" @click="buyFn('join_cart')">
+								加入购物车</button>
+							<button
+								v-if="isShowSingleSku"
+								:style="{ width : (goodsDetail.goods.goods_type == 'real' || (goodsDetail.goods.goods_type == 'virtual' && goodsDetail.goods.virtual_receive_type != 'verify')) ?  '200rpx' : '400rpx' + '!important'  }"
+								class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] primary-btn-bg !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
+								@click="buyFn('buy_now')">立即购买</button>
+							<button v-else
+								:style="{ width : (goodsDetail.goods.goods_type == 'real' || (goodsDetail.goods.goods_type == 'virtual' && goodsDetail.goods.virtual_receive_type != 'verify')) ?  '200rpx' : '400rpx' + '!important'  }"
+								class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
+								>已售罄</button>
+						</block>
+						<button v-else-if="maxBuy == 0"
+							:style="{ width : '420rpx' + '!important'  }"
+							class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border"
+							>已达限购数量</button>
+					</view>
+					<view class="flex flex-1" v-else>
+						<button class="w-[100%] !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">该商品已下架</button>
+					</view>
+				</view>
+			</view>
+			<!-- 服务 -->
+			<view @touchmove.prevent.stop>
+				<u-popup class="popup-type" :show="servicesDataShow" @close="servicesDataShow = false">
+					<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
+						<view class="title">商品服务</view>
+						<scroll-view class="h-[520rpx]" scroll-y="true">
+							<view class="pl-[22rpx] pb-[28rpx] pr-[37rpx]">
+								<view class="flex mb-[28rpx]" v-for="(item, index) in goodsDetail.service">
+									<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" :src="img(item.image || 'addon/shop/icon_service.png')" mode="aspectFit" />
+									<view class="flex-1">
+										<view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.service_name }}</view>
+										<view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+				</u-popup>
+			</view>
+			<!-- 配送 -->
+			<view @touchmove.prevent.stop>
+				<u-popup class="popup-type" :show="distributionDataShow" @close="distributionDataShow = false">
+					<view class="min-h-[360rpx] popup-common" @touchmove.prevent.stop>
+						<view class="title">配送方式</view>
+						<scroll-view class="h-[520rpx]" scroll-y="true">
+							<view class="px-[var(--popup-sidebar-m)]">
+								<view class="flex mb-[40rpx]" v-for="(item, index) in goodsDetail.delivery_type_list" @click="distributionListFn(item,index)">
+									<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" :src="img('addon/shop/icon_service.png')" mode="aspectFit" />
+									<view class="flex-1">
+										<view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.name }}</view>
+										<view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+				</u-popup>
+			</view>
+			<!-- 优惠券 -->
+			<view @touchmove.prevent.stop>
+				<u-popup class="popup-type" :show="couponListShow" @close="couponListShow = false">
+					<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
+						<view class="title">优惠券</view>
+						<scroll-view class="h-[520rpx]" scroll-y="true">
+							<view class="px-[32rpx]">
+								<view
+									class="mb-[30rpx] flex items-center border-[2rpx] border-solid border-[rgba(0,0,0,.1)] rounded-[var(--rounded-small)]"
+									v-for="(item, index) in couponList" :key="index">
+									<view class="flex flex-col items-center my-[20rpx] w-[200rpx] border-0 border-r-[2rpx] border-dashed border-[rgba(0,0,0,.1)]">
+										<view class="text-xs price-font">
+											<text class="text-[28rpx]">￥</text>
+											<text class="text-[48rpx]">{{ Number(item.price) }}</text>
+										</view>
+										<text class="text-xs mt-[12rpx]">{{ Number(item.min_condition_money) ? ('满' + Number(item.min_condition_money) + '元可用') : '无门槛' }}</text>
+									</view>
+									<view class="ml-[20rpx] flex-1 flex flex-col py-[20rpx]">
+										<text class="text-xs font-500">{{ item.title }}</text>
+										<text class="text-xs text-[var(--text-color-light6)] mt-[12rpx]">{{ item.valid_type == 1 &&
+											('领取之日起' + item.length + '天内有效') || item.valid_type == 2 &&
+											('领取之日起至' + item.valid_end_time) }}</text>
+									</view>
+									<text v-if="item.btnType === 'collecting'"
+										class="bg-[var(--primary-color)] mr-[20rpx] w-[106rpx] box-border text-center text-[#fff] h-[50rpx] text-[22rpx] px-[20rpx] leading-[50rpx] rounded-[100rpx]"
+										@click="getCouponFn(item, index)">领取</text>
+									<text v-else class="!bg-[#FFB4B1] mr-[20rpx] text-[#fff] mr-[20rpx] h-[50rpx] text-[22rpx] px-[20rpx] leading-[50rpx] rounded-[100rpx]">{{ item.btnType === 'collected' ? '已领完' : '已领取' }}</text>
+								</view>
+							</view>
+						</scroll-view>
+						<view class="btn-wrap">
+							<button class="primary-btn-bg btn" @click="couponListShow = false">确定</button>
+						</view>
+					</view>
+				</u-popup>
+			</view>
+			<ns-goods-sku v-if="loading" ref="goodsSkuRef" :goods-detail="goodsDetail" @change="specSelectFn"></ns-goods-sku>
+			<ns-goods-manjian ref="manjianShowRef"></ns-goods-manjian>
+			<share-poster ref="sharePosterRef" posterType="shop_goods" :posterId="goodsDetail.goods.poster_id" :posterParam="posterParam" :copyUrlParam="copyUrlParam" />
+		</view>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, getCurrentInstance, nextTick } from 'vue';
+import { onLoad, onShow, onUnload,onPageScroll } from '@dcloudio/uni-app'
+import { img, redirect,handleOnloadParams, getToken, deepClone, goback } from '@/utils/common';
+import { t } from '@/locale';
+import { getGoodsDetail, browse, collect, cancelCollect, getEvaluateList, getManjian } from '@/addon/shop/api/goods';
+import { getShopCouponList, getCoupon } from '@/addon/shop/api/coupon';
+import nsGoodsSku from '@/addon/shop/components/ns-goods-sku/ns-goods-sku.vue';
+import nsGoodsManjian from '@/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue';
+import useCartStore from '@/addon/shop/stores/cart'
+import { useLogin } from '@/hooks/useLogin'
+import useMemberStore from '@/stores/member'
+import { useShare }from '@/hooks/useShare'
+import sharePoster from '@/components/share-poster/share-poster.vue'
+import {useGoods} from '@/addon/shop/hooks/useGoods'
+import nsGoodsRecommend from '@/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue';
+
+const diyGoods = useGoods();
+// 使用 reactive 创建响应式对象
+const timeData = ref({});
+// 定义 onChange 方法
+const onChange = (e) => {
+  timeData.value = e;
+};
+
+// 分享
+const{setShare} = useShare()
+
+// 会员信息
+const memberStore = useMemberStore()
+const userInfo = computed(() => memberStore.info)
+
+// 购物车数量
+const cartStore = useCartStore();
+const cartTotalNum = computed(() => cartStore.totalNum)
+
+const goodsSkuRef: any = ref(null);
+const goodsDetail: any = ref({});
+const switchMedia: any = ref('img');
+const manjianShowRef: any = ref(null); //满减送
+
+const isAttrFormatShow = ref(false); //控制属性是否展开
+
+const loading = ref<boolean>(false);
+const servicesDataShow = ref<boolean>(false)
+const distributionDataShow =  ref<boolean>(false) //配送
+const couponListShow = ref<boolean>(false) //优惠券
+const discountTime = ref(0)
+
+const sendMessageTitle = ref('')
+const sendMessagePath = ref('')
+const sendMessageImg = ref('')
+
+const wxPrivacyPopupRef:any = ref(null)
+const videoContext: any = ref(null)
+let pageParameter = {};
+onLoad((option: any) => {
+	// #ifdef MP-WEIXIN
+	// 处理小程序场景值参数
+	option = handleOnloadParams(option);
+	// #endif
+	pageParameter = option;
+})
+
+onShow(() => {
+	loading.value = false;
+	// 删除配送方式
+	uni.removeStorageSync('distributionType');
+	cartStore.getList();
+	getManjianInfo();
+	getDetailInfo();
+})
+
+const getDetailInfo = ()=>{
+	getGoodsDetail({
+		goods_id: pageParameter.goods_id || '',
+		sku_id: pageParameter.sku_id || '',
+		type: pageParameter.type || ''  // 来源营销活动类型，例如：discount：限时折扣，newcomer_discount：新人价
+	}).then((res: any) => {
+		if (!res.data.goods || JSON.stringify(res.data) === '[]') {
+	        let goBackParameter = {
+	            url:'/addon/shop/pages/index',
+	            title: '找不到该商品',
+	            mode: 'reLaunch'
+	        };
+	        goback(goBackParameter)
+			return false
+		}
+
+		goodsDetail.value = deepClone(res.data);
+		isCollect.value = goodsDetail.value.goods.is_collect;
+		goodsDetail.value.delivery_type_list = goodsDetail.value.goods.delivery_type_list ? Object.values(goodsDetail.value.goods.delivery_type_list) : [];
+		goodsDetail.value.goods.goods_image = goodsDetail.value.goods.goods_image_thumb_big;
+		goodsDetail.value.goods.goods_image.forEach((item: any, index: any) => {
+			goodsDetail.value.goods.goods_image[index] = img(item);
+		})
+
+		loading.value = true;
+
+		let data: any = deepClone(res.data);
+		goodsDetail.value.goods.attr_format = []
+		if (data.goods && data.goods.attr_format) {
+			let attrFormatArr: any = deepClone(JSON.parse(data.goods.attr_format));
+			attrFormatArr.forEach((item: any, index: any) => {
+				if ((item.attr_child_value_name && !(item.attr_child_value_name instanceof Array)) || ((item.attr_child_value_name instanceof Array) && item.attr_child_value_name.length)) {
+					goodsDetail.value.goods.attr_format.push(item);
+				}
+			})
+		}
+		if(goodsDetail.value.goods.goods_video != '') videoContext.value = uni.createVideoContext('goodsVideo');
+		sendMessageTitle.value = goodsDetail.value.goods.goods_name
+		sendMessagePath.value = '/addon/shop/pages/goods/detail?sku_id=' + goodsDetail.value.sku_id;
+		if(goodsDetail.value.type) {
+			sendMessagePath.value += '&type=' + goodsDetail.value.type;
+		}
+		sendMessageImg.value = img(goodsDetail.value.goods.goods_cover_thumb_mid)
+
+		// 分享 - start
+		let share = {
+			title: goodsDetail.value.goods.goods_name,
+			desc: goodsDetail.value.goods.sub_title,
+			url: goodsDetail.value.goods.goods_cover_thumb_mid
+		}
+		uni.setNavigationBarTitle({
+			title: goodsDetail.value.goods.goods_name
+		})
+		setShare({
+			wechat: {
+				...share
+			},
+			weapp: {
+				...share
+			}
+		});
+		// 分享 - end
+
+		// 折扣信息
+		if (Object.keys(goodsDetail.value.goods).length && goodsDetail.value.type == 'discount' && goodsDetail.value.goods.is_discount && Object.keys(goodsDetail.value.discount_info).length) {
+			let now = new Date();
+			let timestamp: any = now.getTime();
+			discountTime.value = goodsDetail.value.discount_info.active.end_time * 1000 - timestamp.toFixed(0)
+		}
+		// 商品限购
+		goodsMaxBuy(goodsDetail.value);
+
+		// 获取优惠券列表
+		getShopCouponListFn();
+
+		// 获取评价
+		getEvaluateListFn();
+
+		if(getToken()) {
+			// 我的足迹
+			myBrowseFn(goodsDetail.value.goods.goods_id);
+		}
+
+		copyUrlFn();
+
+		nextTick(() => {
+
+			setTimeout(() => {
+				const query = uni.createSelectorQuery().in(instance);
+				query.select('.swiper-box').boundingClientRect((data: any) => {
+					swiperHeight = data ? data.height : 0;
+				}).exec();
+				query.select('.detail-head').boundingClientRect((data: any) => {
+					if (data) {
+						detailHead = data.height ? data.height : 0;
+					}
+				}).exec();
+
+				if(sharePosterRef.value) {
+					posterParam.sku_id = goodsDetail.value.sku_id;
+					if (userInfo.value && userInfo.value.member_id) posterParam.member_id = userInfo.value.member_id;
+					sharePosterRef.value.loadPoster();
+				}
+
+			}, 400)
+
+			// #ifdef MP
+			if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+			// #endif
+		})
+	})
+}
+
+// 我的足迹
+const myBrowseFn = (goods_id:any)=>{
+	browse({
+		goods_id
+	}).then((res: any) => {})
+}
+
+// 获取满减信息
+let manjianData = ref({})
+const getManjianInfo = ()=>{
+	getManjian({
+		goods_id: pageParameter.goods_id || '',
+		sku_id: pageParameter.sku_id || ''
+	}).then((res: any) => {
+		if(Object.keys(res.data).length){
+			manjianData.value.condition_type = res.data.condition_type;
+			manjianData.value.rule_json = res.data.rule_json;
+			manjianData.value.name = res.data.manjian_name;
+		}
+	})
+}
+
+// 商品限购
+const maxBuy = ref(-1);
+const goodsMaxBuy = (data:any = {})=>{
+	// 限购 - 是否开启限购
+	if(data.goods.is_limit && userInfo.value && data.goods.stock > 0){
+		if(data.goods.max_buy){
+			let max_buy = 0;
+			if(data.goods.limit_type == 1){ //单次限购
+				max_buy = data.goods.max_buy;
+			}else{ // 单人限购
+				let buyVal = data.goods.max_buy - (data.goods.has_buy||0);
+				max_buy = buyVal > 0 ? buyVal : 0;
+			}
+
+			if(max_buy > data.goods.stock){
+				maxBuy.value = data.goods.stock
+			}else if(max_buy <= data.goods.stock){
+				maxBuy.value = max_buy;
+			}
+		}
+	}
+}
+
+
+const specSelectFn = (id: any) => {
+	goodsDetail.value.skuList.forEach((item: any, index: any) => {
+		if (item.sku_id == id) {
+			Object.assign(goodsDetail.value, item);
+		}
+	})
+}
+
+// 判断单规格库存是否为0
+const isShowSingleSku = computed(() => {
+	let isSingleSpec = false // 是否为单规格，true：多规格，false：单规格
+	goodsDetail.value.skuList.forEach((item: any,index: any)=>{
+		if(item.sku_spec_format){
+			isSingleSpec = true
+		}
+	})
+
+	// 单规格，库存为0，显示已售罄
+	if(!isSingleSpec && goodsDetail.value.stock <= 0){
+	    return false;
+	}else if(!isSingleSpec && goodsDetail.value.stock > 0){
+	    // 单规格，库存大于0，可以购买
+        return true;
+    }
+	return true;
+})
+
+// 判断商品属性模块是否展示
+const isGoodsPropertyTemp = computed(() => {
+	let bool = false;
+	if(goodsDetail.value.service && goodsDetail.value.service.length ||
+	goodsDetail.value.goodsSpec && goodsDetail.value.goodsSpec.length ||
+	goodsDetail.value.goods.goods_type == 'real'&&goodsDetail.value.delivery_type_list&&goodsDetail.value.delivery_type_list.length || couponList.value.length){
+		bool = true;
+	}
+	return bool;
+})
+
+const manjianOpenFn = () =>{
+	manjianShowRef.value.open(manjianData.value);
+}
+
+const buyFn = (type: any) => {
+	if(goodsSkuRef.value){
+		goodsSkuRef.value.open(type)
+	}
+}
+
+// 收藏
+const isCollect: any = ref(0);
+const collectFn = () => {
+	// 检测是否登录
+	if (!userInfo.value) {
+		uni.showToast({
+			title: '未登录，请先登录后再收藏商品',
+			icon: 'none'
+		});
+		return false
+	}
+	let api = isCollect.value ? cancelCollect({ goods_ids: [goodsDetail.value.goods_id]}) : collect(goodsDetail.value.goods_id);
+	api.then(res => {
+		isCollect.value = !isCollect.value;
+		if (isCollect.value) {
+			uni.showToast({
+				title: '收藏成功',
+				icon: 'none'
+			});
+		} else {
+			uni.showToast({
+				title: '取消收藏',
+				icon: 'none'
+			});
+		}
+	})
+}
+
+// 优惠券
+const couponList = ref([]);
+const getShopCouponListFn = () => {
+	getShopCouponList({
+		category_id: goodsDetail.value.goods.goods_category || '',
+		goods_id: goodsDetail.value.goods_id || ''
+	}).then((res: any) => {
+		couponList.value = res.data.data.map((el: any) => {
+			if (el.sum_count != -1 && el.receive_count === el.sum_count) {
+				el.btnType = 'collected'//已领完
+			}
+			if (!userInfo.value) {
+				el.btnType = 'collecting'//领用
+			} else {
+				if (el.is_receive && el.limit_count === el.member_receive_count) {
+					el.btnType = 'using'//去使用
+				} else {
+					el.btnType = 'collecting'//领用
+				}
+			}
+			return el
+		});
+	})
+}
+
+// 领取优惠券
+const getCouponFn = (data: any, index: any) => {
+	// 检测是否登录
+	if (!userInfo.value) {
+		useLogin().setLoginBack({
+			url: '/addon/shop/pages/goods/detail',
+			param: { sku_id: goodsDetail.value.sku_id, type: goodsDetail.value.type }
+		})
+		return false
+	}
+	getCoupon({
+		coupon_id: data.id || '',
+		number: 1,
+	}).then(res => {
+		// couponList.value[index].btnType = 'using'
+		getShopCouponListFn();
+	})
+}
+
+// 获取评价
+const evaluate = ref({
+	count : 0
+})
+
+const getEvaluateListFn = () => {
+	getEvaluateList(goodsDetail.value.goods_id).then((res: any) => {
+		evaluate.value = res.data
+	})
+}
+
+//进入评论
+const toLink = () => {
+	redirect({ url: '/addon/shop/pages/evaluate/list', param: { goods_id: goodsDetail.value.goods_id } })
+}
+
+//预览图片
+const imgListPreview = (item:any,index:any) => {
+	if(Array.isArray(item)){
+		if (!item.length) return false
+		var urlList =item;
+		uni.previewImage({
+			indicator: "number",
+			current:index,
+			loop: true,
+			urls: urlList
+		})
+	}else{
+		if (item === '') return false
+		var urlList = []
+		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+		uni.previewImage({
+			indicator: "number",
+			loop: true,
+			urls: urlList
+		})
+	}
+
+}
+
+// 返回上一页
+const backToPrevious=()=> {
+	if(getCurrentPages().length > 1){
+		uni.navigateBack({
+			delta: 1
+		});
+	}else{
+        redirect({
+			url: '/addon/shop/pages/index',
+            mode: 'reLaunch'
+		});
+	}
+}
+
+/************ 选择配送方式-start ****************/
+const selectDeliveryType = ref(0);
+const distributionDataOpen = (()=>{
+	distributionDataShow.value = true;
+});
+const distributionListFn = ((data: any,index: any)=>{
+	selectDeliveryType.value =  index;
+	distributionDataShow.value = false;
+	uni.setStorageSync('distributionType', data.name);
+});
+/************ 选择配送方式-end ****************/
+
+
+/************ 自定义头部-start ****************/
+// 获取系统状态栏的高度
+let systemInfo = uni.getSystemInfoSync();
+let platform = systemInfo.platform;
+let menuButtonInfo: any = {};
+// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+// #endif
+
+// 导航栏内部盒子的样式
+const navbarInnerStyle = computed(() => {
+	let style = '';
+	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+	// #ifdef MP
+	let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width * 2 + 'rpx' : '70rpx';
+	style += 'height:' + menuButtonInfo.height + 'px;';
+	style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
+	style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
+	style += 'padding-top:' + menuButtonInfo.top + 'px;';
+	style += 'padding-bottom: 8px;';
+
+	style += 'font-size: 32rpx;';
+	if (platform === 'ios') {
+		// 苹果(iOS)设备
+		style += 'font-weight: 500;';
+	} else if (platform === 'android') {
+	  // 安卓(Android)设备
+		style += 'font-size: 36rpx;';
+	}
+	// #endif
+
+	// #ifdef H5
+	style += 'height: 100rpx;';
+	style += 'padding-right: 30rpx;';
+	style += 'padding-left: 30rpx;';
+
+	style += 'font-size: 32rpx;';
+	if (platform === 'ios') {
+		// 苹果(iOS)设备
+		style += 'font-weight: 500;';
+	} else if (platform === 'android') {
+	  // 安卓(Android)设备
+		style += 'font-size: 36rpx;';
+	}
+	// #endif
+	return style;
+})
+
+// 导航栏内部盒子的样式
+const navbarInnerArrowStyle = computed(() => {
+	let style = '';
+	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+	// #ifdef MP
+	style += "padding-left: 10rpx;"
+	style += "padding-right: 10rpx;"
+	style += 'position: absolute;';
+	style += 'left:calc( 100vw - ' + menuButtonInfo.right + 'px);';
+	style += 'font-size: 26px;';
+	if (platform === 'ios') {
+		// 苹果(iOS)设备
+		style += 'font-weight: 700;';
+	} else if (platform === 'android') {
+	  // 安卓(Android)设备
+	}
+	// #endif
+	// #ifdef H5
+	style += 'font-size: 26px;';
+	// #endif
+	return style;
+})
+
+// 头部滚动
+const instance = getCurrentInstance();
+let swiperHeight = 0
+let detailHead = 0
+
+const detailHeadBgChange = ref(false)
+onPageScroll((e)=> {
+    if (swiperHeight == 0 || detailHead == 0) return;
+    let height = swiperHeight - detailHead - 20;
+    detailHeadBgChange.value = false;
+    if (e.scrollTop >= height) {
+        detailHeadBgChange.value = true;
+    }
+})
+/************ 自定义头部-end ****************/
+
+const swiperClick = (index: any)=>{
+	if(typeof index == 'number') imgListPreview(goodsDetail.value.goods.goods_image,index)
+}
+
+/************* 分享海报-start **************/
+const sharePosterRef: any = ref(null);
+const copyUrlParam = ref('');
+let posterParam: any = {};
+
+// 分享海报链接
+const copyUrlFn = ()=>{
+	copyUrlParam.value = '?sku_id='+goodsDetail.value.sku_id;
+	if(goodsDetail.value.type) {
+		copyUrlParam.value += '&type=' + goodsDetail.value.type;
+	}
+	if (userInfo.value && userInfo.value.member_id) copyUrlParam.value += '&mid=' + userInfo.value.member_id;
+}
+
+const openShareFn = ()=>{
+	sharePosterRef.value.openShare()
+}
+/************* 分享海报-end **************/
+
+// 价格类型
+const priceType = ref('') //''=>原价，新人价=>newcomer_price，discount_price=>折扣价，member_price=>会员价
+
+// 商品价格
+const goodsPrice = computed(() => {
+    let price = "0.00";
+	if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'newcomer_discount' && goodsDetail.value.is_newcomer && goodsDetail.value.newcomer_price != goodsDetail.value.price) {
+		// 新人价
+		price = goodsDetail.value.newcomer_price;
+		priceType.value = 'newcomer_price'
+	} else if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'discount' && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.is_discount && goodsDetail.value.sale_price != goodsDetail.value.price) {
+        // 折扣价
+        price = goodsDetail.value.sale_price ? goodsDetail.value.sale_price : goodsDetail.value.price;
+        priceType.value = 'discount_price'
+    } else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
+        // 会员价
+        price = goodsDetail.value.member_price ? goodsDetail.value.member_price : goodsDetail.value.price;
+        priceType.value = 'member_price'
+    } else {
+        price = goodsDetail.value.price
+        priceType.value = ''
+    }
+    return price;
+})
+
+// 关闭预览图片
+onUnload(()=>{
+	// #ifdef  H5 || APP
+	uni.closePreviewImage()
+	// #endif
+})
+</script>
+<style lang="scss" scoped>
+@import '@/addon/shop/styles/common.scss';
+:deep(.uni-video-bar){
+	bottom: 34rpx !important;
+}
+:deep(.uni-video-cover) {
+	background: none;
+}
+
+:deep(.uni-video-cover-duration) {
+	display: none;
+}
+
+:deep(.uni-video-cover-play-button) {
+	border-radius: 50%;
+	border: 4rpx solid #fff;
+	width: 120rpx;
+	height: 120rpx;
+	background-size: 30%;
+}
+
+.remove-border {
+	&::after {
+		border: none;
+	}
+}
+:deep(.u-cell-group__wrapper) {
+	.u-cell__body {
+		padding: 23rpx 32rpx;
+	}
+}
+
+.tab-bar-placeholder {
+	padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
+	padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
+}
+
+.tab-bar {
+	padding-top: 16rpx;
+	padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
+	padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
+}
+:deep(.u-count-down) .u-count-down__text{
+	color: #fff;
+	font-size: 28rpx;
+}
+:deep(.u-swiper-indicator__wrapper--line__bar){
+	height: 5rpx !important;
+}
+:deep(.u-swiper-indicator__wrapper--line){
+	height: 5rpx !important;
+}
+.datail-title{
+	background: linear-gradient(#fff 70%, #F6F6F6);
+}
+.goods-sku .value-wid{
+	width: calc(100% - 160rpx);
+}
+.media-mode{
+	text {
+		background: rgba(100, 100, 100, 0.4);
+		color: #fff;
+		font-size: 24rpx;
+		line-height: 50rpx;
+		border-radius: 20rpx;
+		padding: 0 30rpx;
+		display: inline-block;
+
+		&:last-child {
+			margin-left: 40rpx;
+		}
+	}
+}
+/*  #ifdef MP  */
+.goods-price-time{
+	animation: fadein .1s;
+}
+/* 进入动画 */
+@keyframes fadein {
+  0% {
+	opacity: 0;
+  }
+  99% {
+  	opacity: 0;
+  }
+  100% {
+	opacity: 1;
+  }
+}
+/*  #endif  */
+</style>
diff --git a/src/addon/shop/pages/goods/list.vue b/src/addon/shop/pages/goods/list.vue
new file mode 100644
index 0000000..b709343
--- /dev/null
+++ b/src/addon/shop/pages/goods/list.vue
@@ -0,0 +1,329 @@
+<template>
+	<view class="bg-gray-100 min-h-[100vh]" :style="themeColor()">
+		<view class="fixed left-0 right-0 top-0 product-warp bg-[#fff]">
+			<view class="py-[14rpx] flex items-center justify-between px-[20rpx]">
+				<view class="flex-1 search-input mr-[20rpx]">
+					<text @click.stop="searchTypeFn('all')" class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn"></text>
+					<input class="input" maxlength="50" type="text" v-model="goods_name" placeholder="请搜索您想要的商品" placeholderClass="text-[var(--text-color-light9)] text-[24rpx]" confirm-type="search" @confirm="searchTypeFn('all')">
+					<text v-if="goods_name" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="goods_name=''"></text>
+				</view>
+				<view :class="['iconfont text-[32rpx] text-[#333] -mb-[2rpx]', listType ? 'icona-yingyongzhongxinV6xx-32' : 'icona-yingyongliebiaoV6xx-32']" @click="listIconBtn"></view>
+			</view>
+			<view class="flex justify-between tems-center h-[88rpx] px-[30rpx]">
+				<view class=" flex items-center justify-between text-[26rpx] flex-1">
+					<text class="text-[#333]"  :class="{ 'text-[var(--primary-color)] font-500': searchType == 'all' }" @click="searchTypeFn('all')">综合排序</text>
+					<view class="flex items-center text-[#333]" :class="{ 'text-[var(--primary-color)] font-500': searchType == 'sale_num' }" @click="searchTypeFn('sale_num')">
+						<text class="mr-[4rpx]">销量</text>
+						<text v-if="sale_num == 'asc'" class="text-[16rpx] nc-iconfont nc-icon-a-xiangshangV6xx1" :class="{'text-[var(--primary-color)]': searchType == 'sale_num' }"></text>
+						<text  v-else class="text-[16rpx] nc-iconfont nc-icon-a-xiangxiaV6xx1" :class="{'text-[var(--primary-color)]': searchType == 'sale_num' }"></text>
+					</view>
+					<view class="flex items-center text-[#333]" :class="{'text-[var(--primary-color)] font-500': searchType == 'price' }" @click="searchTypeFn('price')">
+						<text class="mr-[4rpx]">价格</text>
+						<text v-if="price == 'asc'" class="text-[16rpx] nc-iconfont nc-icon-a-xiangshangV6xx1" :class="{'text-[var(--primary-color)]': searchType == 'price' }"></text>
+						<text v-else class="text-[16rpx] nc-iconfont nc-icon-a-xiangxiaV6xx1" :class="{'text-[var(--primary-color)]': searchType == 'price' }"></text>
+					</view>
+					<view class="flex items-center" :class="{'text-[var(--primary-color)] font-500': searchType == 'label', 'text-[#333]': searchType != 'label' }" @click="searchTypeFn('label')">
+						<text class="mr-[8rpx]">筛选</text>
+						<text class="iconfont font-500 icona-shaixuanV6xx-34 -mb-[4rpx] !text-[26rpx]"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-popup :show="labelPopup" mode="top" @close="labelPopup = false">
+			<view @touchmove.prevent.stop>
+				<view class="text-[28rpx] px-[30rpx] mt-[40rpx]">全部分类</view>
+				<view class="flex flex-wrap pl-[30rpx] pt-[30rpx]">
+					<text @click="loadCategory(item.category_id)" v-for="(item, index) in categoryList" :key="item.category_id"
+						:class="{ 'label-select': currGoodsCategory == item.category_id }" class="truncate text-[#333] px-[10rpx] border-[2rpx] border-solid border-transparent w-[184rpx] h-[56rpx] flex items-center justify-center mr-[30rpx] mb-[30rpx] box-border bg-[var(--temp-bg)] rounded-[50rpx] text-[24rpx]">
+						{{ item.category_name }}
+					</text>
+				</view>
+			</view>
+		</u-popup>
+
+		<mescroll-body ref="mescrollRef" top="176rpx" bottom="60px" @init="mescrollInit" :down="{ use: false }" @up="getAllAppListFn">
+			<view v-if="goodsList.length" :class="['sidebar-margin', !listType ? 'biserial-goods-list' : '']">
+				<template v-if="listType">
+					<view v-for="(item, index) in goodsList" :key="index" class="bg-white flex px-[20rpx] py-[24rpx] rounded-[var(--rounded-small)] overflow-hidden top-mar" :class="{ 'mb-[20rpx]': (index+1) == goodsList.length}" @click="toDetail(item.goods_id)">
+						<image v-if="item.goods_cover_thumb_mid" class="w-[190rpx] h-[190rpx] rounded-[var(--rounded-mid)]" :src="img(item.goods_cover_thumb_mid)" :mode="'aspectFill'" @error="item.goods_cover_thumb_mid='static/resource/images/diy/shop_default.jpg'"></image>
+						<image v-else class="w-[190rpx] h-[190rpx] rounded-[var(--rounded-mid)]" :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
+						<view class="flex-1 flex flex-col ml-[20rpx] py-[6rpx]">
+							<view class="text-[28rpx] text-[#333] leading-[40rpx] multi-hidden mb-[10rpx]">
+								<view class="brand-tag" v-if="item.goods_brand">
+									{{item.goods_brand.brand_name}}
+								</view>
+								{{ item.goods_name }}
+							</view>
+							<view v-if="item.goods_label_name && item.goods_label_name.length" class="flex flex-wrap">
+								<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+									<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+									<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+										{{tagItem.label_name}}
+									</view>
+								</template>
+							</view>
+							<view class="mt-auto flex justify-between items-baseline">
+								<view class="flex items-baseline mt-[20rpx]">
+									<view class="text-[var(--price-text-color)] price-font flex items-baseline">
+										<text class="text-[24rpx] font-500 mr-[4rpx]">￥</text>
+										<text class="text-[40rpx] font-500">{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[0] }}</text>
+										<text class="text-[24rpx] font-500">.{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[1] }}</text>
+									</view>
+									<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+								</view>
+								<text class="text-[22rpx] mt-[20rpx] text-[var(--text-color-light9)]">已售{{ item.sale_num }}{{ item.unit }}</text>
+							</view>
+						</view>
+					</view>
+				</template>
+				<template v-else>
+					<view>
+						<template v-for="(item, index) in goodsList">
+							<view v-if="(index%2) == 0" class="flex flex-col bg-[#fff] box-border rounded-[var(--rounded-mid)] overflow-hidden mt-[var(--top-m)]" @click="toDetail(item.goods_id)">
+								 <image v-if="item.goods_cover_thumb_mid" class="w-[100%] h-[344rpx] rounded-tl-[var(--rounded-mid)] rounded-tr-[var(--rounded-mid)]" :src="img(item.goods_cover_thumb_mid)" :mode="'aspectFill'" @error="item.goods_cover_thumb_mid='static/resource/images/diy/shop_default.jpg'"></image>
+								 <image v-else class="w-[100%] h-[344rpx] rounded-tl-[var(--rounded-mid)] rounded-tr-[var(--rounded-mid)]" :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
+								<view class="px-[20rpx] flex-1 pt-[16rpx] pb-[24rpx] flex flex-col justify-between">
+									<view class="text-[#303133] leading-[40rpx] text-[28rpx] multi-hidden">
+										<view class="brand-tag" v-if="item.goods_brand">
+											{{item.goods_brand.brand_name}}
+										</view>
+										{{ item.goods_name }}
+									</view>
+									<view v-if="item.goods_label_name && item.goods_label_name.length" class="flex flex-wrap">
+										<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+											<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+											<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+												{{tagItem.label_name}}
+											</view>
+										</template>
+									</view>
+									<view class="flex justify-between flex-wrap items-end">
+										<view class="flex items-baseline mt-[20rpx]">
+											<view class="text-[var(--price-text-color)] price-font flex items-baseline">
+												<text class="text-[24rpx] font-500">￥</text>
+												<text class="text-[40rpx] font-500">{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[0] }}</text>
+												<text class="text-[24rpx] font-500">.{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[1] }}</text>
+											</view>
+											<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+										</view>
+										<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[20rpx]">已售{{ item.sale_num }}{{ item.unit}}</text>
+									</view>
+								</view>
+							</view>
+						</template>
+					</view>
+					<view>
+						<template v-for="(item, index) in goodsList">
+							<view v-if="(index%2) == 1" class="flex flex-col bg-[#fff] box-border rounded-[var(--rounded-mid)] overflow-hidden mt-[var(--top-m)]" @click="toDetail(item.goods_id)">
+								 <image v-if="item.goods_cover_thumb_mid" class="w-[100%] h-[344rpx] rounded-tl-[var(--rounded-mid)] rounded-tr-[var(--rounded-mid)]" :src="img(item.goods_cover_thumb_mid)" :mode="'aspectFill'" @error="item.goods_cover_thumb_mid='static/resource/images/diy/shop_default.jpg'"></image>
+								 <image v-else class="w-[100%] h-[344rpx] rounded-tl-[var(--rounded-mid)] rounded-tr-[var(--rounded-mid)]" :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
+								<view class="px-[20rpx] flex-1 pt-[16rpx] pb-[24rpx] flex flex-col justify-between">
+									<view class="text-[#303133] leading-[40rpx] text-[28rpx] multi-hidden">
+										<view class="brand-tag" v-if="item.goods_brand">
+											{{item.goods_brand.brand_name}}
+										</view>
+										{{ item.goods_name }}
+									</view>
+									<view v-if="item.goods_label_name && item.goods_label_name.length" class="flex flex-wrap">
+										<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+											<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+											<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+												{{tagItem.label_name}}
+											</view>
+										</template>
+									</view>
+									<view class="flex justify-between flex-wrap items-baseline">
+										<view class="flex items-baseline mt-[20rpx]">
+											<view class="text-[var(--price-text-color)] price-font flex items-baseline">
+												<text class="text-[24rpx] font-500">￥</text>
+												<text class="text-[40rpx] font-500">{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[0] }}</text>
+												<text class="text-[24rpx] font-500">.{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[1] }}</text>
+											</view>
+											<image v-if="diyGoods.priceType(item) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]" :src="img('addon/shop/VIP.png')" mode="heightFix" />
+										</view>
+										<text class="mt-[20rpx] text-[22rpx] text-[var(--text-color-light9)]">已售{{ item.sale_num }}{{ item.unit}}</text>
+									</view>
+								</view>
+							</view>
+						</template>
+					</view>
+				</template>
+			</view>
+			<mescroll-empty v-if="!goodsList.length && loading" :option="{tip : '暂无商品', btnText:'去逛逛'}"  @emptyclick="redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })"></mescroll-empty>
+		</mescroll-body>
+
+		<tabbar />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { t } from '@/locale'
+import { redirect, img, getToken } from '@/utils/common';
+import { getGoodsCategoryTree, getGoodsPages } from '@/addon/shop/api/goods';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+import {useGoods} from '@/addon/shop/hooks/useGoods'
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const diyGoods = useGoods();
+const categoryList = ref<Array<Object>>([]);
+const goodsList = ref<Array<any>>([]);
+const coupon_id = ref<number | string>('');
+const currGoodsCategory = ref<number | string>('');
+const mescrollRef = ref(null);
+const loading = ref<boolean>(false);
+// 标签
+const labelPopup = ref(false);
+const goods_name = ref("");
+const price = ref("");
+const sale_num = ref("");
+const searchType = ref('all');
+const isShow = ref(false)//输入框清除文字按钮
+//列表类型
+const listType = ref(true)
+onLoad(async (option: any) => {
+	currGoodsCategory.value = option.curr_goods_category || ''
+	goods_name.value = option.goods_name ? decodeURIComponent(option.goods_name) : ''
+	coupon_id.value = option.coupon_id || ''
+	await getGoodsCategoryTree().then((res: any) => {
+		const initData = { category_name: "全部", category_id: '' };
+		categoryList.value.push(initData);
+		categoryList.value = categoryList.value.concat(res.data);
+	});
+})
+
+interface mescrollStructure {
+	num: number,
+	size: number,
+	endSuccess: Function,
+	[propName: string]: any
+}
+
+const getAllAppListFn = (mescroll: mescrollStructure) => {
+	loading.value = false;
+	let data: object = {
+		goods_category: currGoodsCategory.value,
+		page: mescroll.num,
+		limit: mescroll.size,
+		keyword: goods_name.value,
+		coupon_id: coupon_id.value,
+		order: searchType.value === 'all' ? '' : searchType.value,
+		sort: searchType.value == 'price' ? price.value : sale_num.value
+	};
+	getGoodsPages(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>);
+		//设置列表数据
+		if (Number(mescroll.num) === 1) {
+			goodsList.value = []; //如果是第一页需手动制空列表
+		}
+		goodsList.value = goodsList.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+		loading.value = true;
+	}).catch(() => {
+		loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+const loadCategory = (id: string) => {
+	currGoodsCategory.value = id;
+	goodsList.value = [];
+	getMescroll().resetUpScroll();
+	labelPopup.value = false;
+}
+
+// 搜索
+const searchTypeFn = (type: any) => {
+	searchType.value = type;
+	if (type == 'all') {
+		sale_num.value = '';
+		price.value = '';
+	}
+	if (type == 'price') {
+		sale_num.value = '';
+		if (price.value) {
+			price.value = price.value == 'asc' ? 'desc' : 'asc';
+		} else {
+			price.value = 'asc';
+		}
+	}
+	if (type == 'sale_num') {
+		price.value = '';
+		if (sale_num.value) {
+			sale_num.value = sale_num.value == 'asc' ? 'desc' : 'asc';
+		} else {
+			sale_num.value = 'asc';
+		}
+	}
+	if (type == 'label') {
+		sale_num.value = 'asc';
+		price.value = 'asc';
+		labelPopup.value = true;
+	} else {
+		labelPopup.value = false;
+		goodsList.value = [];
+
+		getMescroll().resetUpScroll();
+	}
+}
+
+//列表样式切换
+const listIconBtn = () => {
+	listType.value = !listType.value
+}
+const toDetail = (id: string | number) => {
+	redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: id }, mode: 'navigateTo' })
+}
+onMounted(() => {
+	setTimeout(() => {
+		getMescroll().optUp.textNoMore = t("end");
+	}, 500)
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/addon/shop/styles/common.scss';
+.scroll-view-wrap {
+	word-break: keep-all;
+}
+
+.text-color {
+	color: var(--primary-color);
+}
+
+.label-select {
+	color: var(--primary-color);
+	border-color: var(--primary-color);
+	background-color: var(--primary-color-light);
+}
+
+:deep(.u-popup .u-transition) {
+	top: 156rpx !important;
+}
+
+.product-warp {
+	z-index: 99999;
+}
+
+:deep(.tab-bar-placeholder) {
+	display: none !important;
+}
+
+:deep(.u-tabbar__placeholder) {
+	display: none !important;
+}
+:deep(.u-input__content__clear){
+	width: 28rpx;
+	height: 28rpx;
+	font-size: 28rpx;
+	background-color: var(--text-color-light9);
+}
+.biserial-goods-list{
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/goods/rank.vue b/src/addon/shop/pages/goods/rank.vue
new file mode 100644
index 0000000..569495c
--- /dev/null
+++ b/src/addon/shop/pages/goods/rank.vue
@@ -0,0 +1,311 @@
+<template>
+	<view class="min-h-[100vh]" :style="themeColor()">
+		<!-- #ifdef MP-WEIXIN -->
+		<top-tabbar :data="param" :isFill="false"/>
+		<!-- #endif -->
+		<!-- 顶部图片 -->
+		<view class="rank-head">
+			<image class="w-[100%] h-[435rpx]" :src="img(rankConfig.rank_images)" mode="aspectFill"></image>
+			<view class="content-box">
+				<!-- 榜单分类按钮 -->
+				<scroll-view scroll-x="true" class="category-slider" scroll-with-animation :scroll-into-view="'id' + activeIndex">
+					<view class="category-con" :style="rankList.length <= 3 ? { display: 'flex', justifyContent: 'center' } : {}">
+						<view class="category-btn" v-for="(item, index) in rankList" :key="index"  :id="'id' + index" @click="selectCategory(item, index)" :style="{ color: activeIndex === index ? rankConfig.select_color : rankConfig.no_color, background: activeIndex === index ? `linear-gradient(to right, ${rankConfig.select_bg_color_start}, ${rankConfig.select_bg_color_end})`: 'transparent'}">
+							<view>{{ item.name }}</view>
+						</view>
+					</view>
+
+				</scroll-view>
+				<!-- <view class="content">
+					<text class="text-[26rpx]">{{rankConfig.rank_name}}</text>
+				</view> -->
+			</view>
+			<view class="side-tab" :style="{ top: topStyle }" @click="rankPopup = true" v-if="rankConfig.rank_remark">
+			  <text class="iconfont icona-paihangbangpc30 icon"></text>
+			  <text class="desc">{{t('rankingRules')}}</text>
+			</view>
+
+		</view>
+		<view class="rank-list p-[20rpx] relative -mt-[42rpx]">
+
+			<!-- 列表 -->
+			<mescroll-body ref="mescrollRef" :height="listHeight"  @init="mescrollInit" :down="{ use: false }" @up="getRankGoodsListFn">
+				<view class="bg-[#fff] flex rounded-[var(--rounded-mid)] p-[20rpx]" v-for="(item,index) in rankGoodsList" :key="item.goods_id" :class="{'mb-[20rpx]': (rankGoodsList.length-1) != index}" v-if="rankGoodsList.length"  @click="toLink(item.goods_id)">
+					<view class="w-[240rpx] h-[240rpx] flex items-center justify-center relative">
+						  <!-- 榜单排名图片 -->
+						<image v-if="index < 5" class="absolute top-[7rpx] left-[10rpx] w-[50rpx] h-[58rpx]" :style="{ zIndex:9 }"  :src="getRankBadge(item.rank_num)" mode="aspectFill"></image>
+						<view class="absolute top-[15rpx] left-[10rpx] flex items-center justify-center w-[50rpx] h-[50rpx]" v-if="index < 5" :style="{ zIndex: 10 }">
+						  <text class="text-[24rpx] font-bold text-[#fff]">{{ index + 1 }}</text>
+						</view>
+
+						<image v-if="item.goods_cover_thumb_mid" class="w-[250rpx] h-[250rpx] rounded-[var(--rounded-mid)]" :src="img(item.goods_cover_thumb_mid)" :mode="'aspectFill'" @error="item.goods_cover_thumb_mid='static/resource/images/diy/shop_default.jpg'"></image>
+						<image class="w-[240rpx] h-[240rpx] rounded-[var(--rounded-mid)]" v-else :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
+
+					</view>
+					<view class="flex flex-col flex-1 justify-between ml-[20rpx] pt-[4rpx]">
+						<view class="text-[28rpx] text-[#333] leading-[40rpx] multi-hidden mb-[10rpx]">
+							<view class="brand-tag" v-if="item.goods_brand">
+								{{item.goods_brand.brand_name}}
+							</view>
+							{{ item.goods_name }}
+						</view>
+						<view v-if="item.goods_label_name && item.goods_label_name.length" class="flex flex-wrap">
+							<template v-for="(tagItem, tagIndex) in item.goods_label_name">
+								<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)" mode="heightFix" @error="diyGoods.error(tagItem,'icon')"></image>
+								<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon" :style="diyGoods.baseTagStyle(tagItem)">
+									{{tagItem.label_name}}
+								</view>
+							</template>
+						</view>
+						<view class="flex items-center justify-between">
+							<view class="text-[var(--price-text-color)] price-font flex items-baseline">
+								<text class="text-[24rpx] font-500">￥</text>
+								<text class="text-[40rpx] font-500">{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[0] }}</text>
+								<text class="text-[24rpx] font-500">.{{ diyGoods.goodsPrice(item).toFixed(2).split('.')[1] }}</text>
+							</view>
+							<view :id="'itemCart' + index" class="w-[102rpx] box-border text-center text-[#fff] primary-btn-bg h-[46rpx] text-[22rpx] leading-[46rpx] rounded-[100rpx]">去购买</view>
+						</view>
+					</view>
+				</view>
+				<mescroll-empty v-if="!rankGoodsList.length && loading" :option="{tip : '暂无商品', btnText:'去逛逛'}" @emptyclick="redirect({ url: '/addon/shop/pages/goods/list'})"></mescroll-empty>
+			</mescroll-body>
+
+			<view @touchmove.prevent.stop>
+				<u-popup :show="rankPopup" @close="closeFn" mode="center" round="var(--rounded-big)">
+					<view class="w-[570rpx] px-[32rpx] popup-common center">
+						<view class="title">{{t('rankingRules')}}</view>
+						<scroll-view :scroll-y="true" class="px-[30rpx] box-border max-h-[260rpx]">
+					        <view class="text-[28rpx] leading-[40rpx] mb-[20rpx]">{{rankConfig.rank_remark}}</view>
+						</scroll-view>
+						<view class="btn-wrap !pt-[40rpx]">
+						    <button class="primary-btn-bg w-[480rpx] h-[70rpx] text-[26rpx] leading-[70rpx] rounded-[35rpx] !text-[#fff] font-500"  @click="rankPopup = false">我知道了</button>
+						</view>
+					</view>
+				</u-popup>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, computed } from 'vue'
+import { t } from '@/locale'
+import { redirect, img, pxToRpx } from '@/utils/common';
+import { getRankList ,getRankGoodsList,getRankConfig} from '@/addon/shop/api/rank';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
+import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+import useDiyStore from '@/app/stores/diy';
+import { topTabar } from '@/utils/topTabbar'
+import { useGoods } from '@/addon/shop/hooks/useGoods'
+
+const diyGoods = useGoods();
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const mescrollRef = ref(null);
+const loading = ref<boolean>(false);
+const diyStore = useDiyStore();
+// 获取系统状态栏的高度
+let menuButtonInfo : any = {};
+// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+// #endif
+/********* 自定义头部 - start ***********/
+const topTabarObj = topTabar()
+let param = topTabarObj.setTopTabbarParam({ title: '' })
+const topStyle = computed(() => {
+	let style = pxToRpx(Number(menuButtonInfo.height) + menuButtonInfo.top + 8)+ 30 + 'rpx;'
+	return style
+})
+/********* 自定义头部 - end ***********/
+
+// 获取系统信息
+const systemInfo = uni.getSystemInfoSync();
+const topImageHeight = 450; 
+const screenHeight = systemInfo.windowHeight; 
+// 将屏幕高度转换为 rpx
+const screenHeightInRpx = (screenHeight / systemInfo.screenWidth) * 750;
+// 计算列表高度
+const listHeight = computed(() => {
+  const listHeightValue = screenHeightInRpx - topImageHeight;
+  return `${listHeightValue}rpx`;
+});
+/**************** 榜单规则 ********************/
+const rankPopup = ref(false)
+const closeFn = () =>{
+	rankPopup.value = false
+}
+const rankList = ref<Array<any>>([]);
+const rankGoodsList = ref<Array<any>>([]);
+
+// 加载分类数据
+const getRankListFn = (isFirstLoad = false) => {
+  getRankList().then((res) => {
+      rankList.value = res.data
+
+      // 仅在首次加载时选择第一个分类
+      if (isFirstLoad && rankList.value && rankList.value.length) {
+        selectCategory(rankList.value[0], 0);
+      } else if (!rankList.value.length) {
+        loading.value = false;
+      }
+
+    }).catch((error) => {
+      console.error("加载分类数据失败", error);
+    })
+};
+
+const rankConfig = reactive({});
+
+// 榜单设置
+const getRankConfigFn = () => {
+  getRankConfig().then((res: any) => {
+    Object.assign(rankConfig, res.data); // 合并新数据
+  });
+};
+
+// 当前选中的分类的索引
+const activeIndex = ref(0)
+// 当前选中的分类的rank_id
+const rankId = ref(0)
+// 当前选中的分类的goods_source
+const goodsSource = ref()
+// 点击分类按钮时，更新选中的分类
+function selectCategory(rank:any, index:any) {
+	loading.value = false;
+	// 清空之前选中的商品列表
+	rankGoodsList.value = [];
+	activeIndex.value = index
+	rankId.value = rank.rank_id
+	goodsSource.value = rank.goods_source
+	getMescroll()?.resetUpScroll();
+}
+
+//获取榜单商品
+const getRankGoodsListFn = (mescroll: any) => {
+	if(rankList.value.length == 0) return;
+	loading.value = false;
+	let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size,
+        rank_id:rankId.value
+	};
+
+	getRankGoodsList(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>).map((el: any) => {return el})
+		let ifPage = true
+		//设置列表数据
+		if (mescroll.num == 1) {
+			rankGoodsList.value = []; //如果是第一页需手动制空列表
+		}
+		rankGoodsList.value = rankGoodsList.value.concat(newArr);
+		if(goodsSource.value=='goods'){
+			ifPage = false
+		}else{
+			ifPage = true
+		}
+		mescroll.endSuccess(newArr.length,ifPage);
+
+		
+		loading.value = true;
+	}).catch(() => {
+		loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+// 跳转商品详情
+const toLink = (goods_id: any) => {
+	redirect({url:'/addon/shop/pages/goods/detail',param:{ goods_id }})
+}
+
+// 获取排行榜名次图片的函数
+function getRankBadge(sort:any) {
+  switch (sort) {
+    case 1:
+      return img('addon/shop/rank/rank_first.png');
+    case 2:
+      return img('addon/shop/rank/rank_second.png');
+    case 3:
+      return img('addon/shop/rank/rank_third.png');
+    default:
+      return img('addon/shop/rank/rank.png');
+  }
+}
+
+onLoad(async (option : any) => {
+	getRankConfigFn()
+	getRankListFn(true)
+})
+
+</script>
+
+<style lang="scss" scoped>
+@import '@/addon/shop/styles/common.scss';
+
+.rank-head {
+	position: relative;
+	.content-box{
+		width: 100%;
+		position: absolute;
+		top: 328rpx;
+		.category-slider {
+			width: 95%;
+			margin: 0 auto;
+			line-height: 100rpx;
+			white-space: nowrap;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+				.category-con{
+					width: 100%;
+					display: flex;
+					align-items: center;
+					.category-btn {
+						display: inline-block;
+						padding: 0 20rpx;
+						height: 55rpx;
+						text-align: center;
+						line-height: 55rpx;
+						justify-content: center;
+						align-items: center;
+						border-radius: 40rpx;
+						font-size: 24rpx;
+						margin-right: 20rpx;
+					}
+				}
+
+		}
+	// 	.content {
+	// 		display: flex;
+	// 		justify-content: center;
+	// 		align-items: center;
+	// 		border-radius: 30rpx;
+	// 		padding: 0 20rpx;
+	// 		height: 44rpx;
+	// 		font-size: 26rpx;
+	// 		color: var(--primary-color);
+	// 		background: linear-gradient(to right, #FFEBD7, #FFFFFF, #FFEBD7);
+	// }
+	}
+
+}
+
+.rank-list {
+	background: #F8F8F8;
+	border-radius: 34rpx 34rpx 0 0;
+
+	.bank-buying {
+		width: 100rpx;
+		height: 44rpx;
+		border-radius: 10rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 500;
+		font-size: 24rpx;
+		color: #FFFFFF;
+		line-height: 44rpx;
+		text-align: center;
+	}
+}
+</style>
diff --git a/src/addon/shop/pages/goods/search.vue b/src/addon/shop/pages/goods/search.vue
new file mode 100644
index 0000000..4d643e7
--- /dev/null
+++ b/src/addon/shop/pages/goods/search.vue
@@ -0,0 +1,207 @@
+<template>
+	<view :style="themeColor()">
+		<view class="flex items-center px-[20rpx] h-[120rpx]">
+			<view class="h-[68rpx] bg-[var(--temp-bg)] px-[30rpx] flex items-center rounded-[100rpx] flex-1">	
+				<text class="nc-iconfont nc-icon-sousuo-duanV6xx1 text-[var(--text-color-light9)] text-[26rpx] mr-[18rpx]"></text>
+				<input class="text-[28rpx] flex-1" maxlength="50" type="text" v-model="inputValue"  placeholder="请搜索您想要的商品" confirm-type="search" placeholderClass="text-[var(--text-color-light9)] text-[28rpx]" @confirm="search">
+				<text v-if="inputValue" class="nc-iconfont nc-icon-cuohaoV6xx1 text-[24rpx] text-[var(--text-color-light9)]" @click="inputValue=''"></text>
+			</view>
+			<text @click.stop="search()" class="text-[26rpx] ml-[32rpx] -mb-[2rpx]">搜索</text>
+		</view>
+
+		<view class="search-content">
+			<!-- 历史搜索 -->
+			<view class="history" v-if="historyList.length">
+				<view class="history-box">
+					<view class="history-top">
+						<view class="title font-500">历史搜索</view>
+						<view class="icon nc-iconfont nc-icon-shanchu-yuangaizhiV6xx !text-[24rpx] text-[var(--text-color-light6)]" @click="deleteHistoryList"></view>
+					</view>
+					<view class="history-bottom " id="history-list" :style="{ maxHeight: !isAllHistory ? '100%' : '148rpx' }">
+						<block v-for="(item, index) in historyList" :key="index">
+							<view class="history-li" @click="otherSearch(item)" v-if="item">
+								<view>{{ item }}</view>
+							</view>
+						</block>
+						<view class="history-li history_more" v-if="isAllHistory" @click="isAllHistory = false">
+							<view class="content-box">
+								<text class="text-[30rpx] nc-iconfont nc-icon-xiaV6xx"></text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+<script setup lang="ts">
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { ref, nextTick } from 'vue';
+import { redirect } from '@/utils/common';
+import useConfigStore from "@/stores/config";
+
+const inputValue = ref('') //搜索框的值
+const historyList = ref([]) //历史搜索记录
+const isAllHistory = ref(false)
+
+onLoad((options:any) => {
+    uni.getStorageSync('goodsSearchHistory') ? '' : uni.setStorageSync('goodsSearchHistory', []);
+});
+
+onShow(() => {
+    findHistoryList()
+    nextTick(()=> {
+        getHistoryHeight();
+    });
+})
+
+//获取历史搜索记录
+const findHistoryList =()=> {
+    historyList.value = uni.getStorageSync('goodsSearchHistory').reverse();
+}
+
+// 删除所有历史记录
+const deleteHistoryList =()=> {
+    uni.showModal({
+        title: '提示',
+        content: '确认删除全部历史记录？',
+        confirmColor: useConfigStore().themeColor['--primary-color'],
+        success: res => {
+            if (res.confirm) {
+                uni.setStorageSync('goodsSearchHistory', []);
+                findHistoryList();
+            }
+        }
+    });
+}
+
+//搜索
+const search = ()=> {
+    // if (inputValue.value.trim() != '') {
+
+        // 对历史搜索处理,判断有无,最近搜索显示在最前
+        let historyList = uni.getStorageSync('goodsSearchHistory');
+        let array = [];
+        if (historyList.length) {
+            array = historyList.filter(v => {
+                return v != inputValue.value.trim();
+            });
+            array.push(inputValue.value.trim());
+        } else {
+            array.push(inputValue.value.trim());
+        }
+        uni.setStorageSync('goodsSearchHistory', array);
+
+        redirect({ url: '/addon/shop/pages/goods/list', param: { goods_name: encodeURIComponent(inputValue.value) }, mode: 'navigateTo' })
+    // }
+}
+
+// 点击历史搜索
+const otherSearch = (e:any)=> {
+    inputValue.value = e;
+    search();
+}
+
+// 获取元素高度
+const getHistoryHeight =()=> {
+    const query = uni.createSelectorQuery().in(this);
+    query.select('#history-list').boundingClientRect((data: any) => {
+        if (data && data.height > uni.upx2px(70) * 2 + uni.upx2px(35) * 2) {
+            isAllHistory.value = true;
+        }
+    }).exec();
+}
+
+</script>
+<style lang="scss" scoped>
+	.content {
+		width: 100vw;
+		/* #ifdef MP */
+		height: 100vh;
+		/* #endif */
+		/* #ifdef H5 */
+		height: calc(100vh - env(safe-area-inset-bottom) - var(--status-bar-height));
+		height: calc(100vh - constant(safe-area-inset-bottom) - var(--status-bar-height));
+		/* #endif */
+		/* #ifdef APP-PLUS */
+		height: calc(100vh - 44px - env(safe-area-inset-bottom));
+		height: calc(100vh - 44px - constant(safe-area-inset-bottom));
+		/* #endif */
+		background: #ffffff;
+	}
+
+	.search-content {
+		box-sizing: border-box;
+		background: #ffffff;
+	}
+
+	.history {
+		width: 100%;
+		box-sizing: border-box;
+
+		.history-box {
+			width: 100%;
+			height: 100%;
+			background: #ffffff;
+			padding: 16rpx 20rpx 0rpx 20rpx;
+
+			box-sizing: border-box;
+			overflow: hidden;
+
+			.history-top {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title {
+					font-size: 28rpx;
+				}
+
+				.iconfont {
+					color: var(--text-color-light9);
+					font-size: 28rpx;
+				}
+			}
+
+			.history-bottom {
+				width: 100%;
+				padding-top: 20rpx;
+				position: relative;
+
+				.history-li {
+					display: inline-block;
+					margin-right: 20rpx;
+					margin-bottom: 15rpx;
+					max-width: 100%;
+
+					view {
+						line-height: 56rpx;
+						background: var(--temp-bg) !important;
+						height: 56rpx;
+						color: #333 !important;
+						margin: 0 0rpx 4rpx 0 !important;
+						padding: 0 24rpx;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						border-radius: 100rpx;
+						font-size: 24rpx;
+					}
+
+					&.history_more {
+						margin-right: 0;
+						position: absolute;
+						bottom: 0;
+						right: 0;
+						.content-box{
+							box-shadow: 2rpx 2rpx 8rpx rgba(0,0,0,.1);
+						}
+					}
+				}
+			}
+		}
+	}
+
+</style>
diff --git a/src/addon/shop/pages/index.vue b/src/addon/shop/pages/index.vue
new file mode 100644
index 0000000..4bc876e
--- /dev/null
+++ b/src/addon/shop/pages/index.vue
@@ -0,0 +1,86 @@
+<template>
+	<view :style="themeColor()">
+        
+		<loading-page :loading="diy.getLoading()"></loading-page>
+
+		<view v-show="!diy.getLoading()">
+
+			<!-- 自定义模板渲染 -->
+			<view class="diy-template-wrap bg-index" v-if="diy.data.pageMode != 'fixed'" :style="diy.pageStyle()">
+
+				<diy-group ref="diyGroupRef" :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />
+
+			</view>
+
+			<!-- 固定模板渲染 -->
+			<view class="fixed-template-wrap" v-if="diy.data.pageMode == 'fixed'">
+
+				<fixed-group :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />
+
+			</view>
+
+		</view>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+
+	</view>
+</template>
+
+<script setup lang="ts">
+    import { ref,nextTick } from 'vue';
+    import {useDiy} from '@/hooks/useDiy'
+    import diyGroup from '@/addon/components/diy/group/index.vue'
+    import fixedGroup from '@/addon/components/fixed/group/index.vue'
+
+    const diy = useDiy({
+        name: 'DIY_SHOP_INDEX'
+    })
+
+    const diyGroupRef = ref(null)
+
+    const wxPrivacyPopupRef:any = ref(null)
+
+    // 监听页面加载
+    diy.onLoad();
+
+    // 监听页面显示
+    diy.onShow((data: any) => {
+        diyGroupRef.value?.refresh();
+	    // #ifdef MP
+	    nextTick(()=>{
+		    if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+	    })
+	    // #endif
+    });
+
+    // 监听页面隐藏
+    diy.onHide();
+	
+	// 监听页面卸载
+	diy.onUnload();
+
+    // 监听下拉刷新事件
+    diy.onPullDownRefresh()
+
+    // 监听滚动事件
+    diy.onPageScroll()
+</script>
+<style lang="scss" scoped>
+	@import '@/styles/diy.scss';
+</style>
+<style lang="scss">
+.diy-template-wrap {
+  /* #ifdef MP */
+  .child-diy-template-wrap {
+    ::v-deep .diy-group {
+      > .draggable-element.top-fixed-diy {
+        display: block !important;
+      }
+    }
+  }
+  /* #endif */
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/member/index.vue b/src/addon/shop/pages/member/index.vue
new file mode 100644
index 0000000..e09d253
--- /dev/null
+++ b/src/addon/shop/pages/member/index.vue
@@ -0,0 +1,94 @@
+<template>
+	<view :style="themeColor()">
+
+		<loading-page :loading="diy.getLoading()"></loading-page>
+
+		<view v-show="!diy.getLoading()">
+
+			<!-- 自定义模板渲染 -->
+			<view class="diy-template-wrap bg-index" v-if="diy.data.pageMode != 'fixed'" :style="diy.pageStyle()">
+
+				<diy-group ref="diyGroupRef" :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />
+
+			</view>
+
+			<!-- 固定模板渲染 -->
+			<view class="fixed-template-wrap" v-if="diy.data.pageMode == 'fixed'">
+
+				<fixed-group :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />
+
+			</view>
+        
+		</view>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+
+	</view>
+</template>
+
+<script setup lang="ts">
+    import {ref, computed,nextTick} from 'vue';
+    import {useDiy} from '@/hooks/useDiy'
+    import diyGroup from '@/addon/components/diy/group/index.vue'
+    import fixedGroup from '@/addon/components/fixed/group/index.vue'
+    import useMemberStore from '@/stores/member'
+
+    // 会员信息
+    const memberStore = useMemberStore()
+    const userInfo = computed(() => memberStore.info)
+
+    const diy = useDiy({
+        name: 'DIY_SHOP_MEMBER_INDEX'
+    })
+
+    const diyGroupRef = ref(null)
+
+    const wxPrivacyPopupRef:any = ref(null)
+
+    // 监听页面加载
+    diy.onLoad();
+
+    // 监听页面显示
+    diy.onShow((data: any) => {
+        diyGroupRef.value?.refresh();
+        if (userInfo.value) {
+          useMemberStore().getMemberInfo()
+        }
+	    // #ifdef MP
+	    nextTick(()=>{
+		    if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+	    })
+	    // #endif
+    });
+
+    // 监听页面隐藏
+    diy.onHide();
+	
+	// 监听页面卸载
+	diy.onUnload();
+
+    // 监听下拉刷新事件
+    diy.onPullDownRefresh()
+
+    // 监听滚动事件
+    diy.onPageScroll()
+</script>
+<style lang="scss" scoped>
+	@import '@/styles/diy.scss';
+</style>
+<style lang="scss">
+.diy-template-wrap {
+  /* #ifdef MP */
+  .child-diy-template-wrap {
+    ::v-deep .diy-group {
+      > .draggable-element.top-fixed-diy {
+        display: block !important;
+      }
+    }
+  }
+  /* #endif */
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/member/my_coupon.vue b/src/addon/shop/pages/member/my_coupon.vue
new file mode 100644
index 0000000..edcae81
--- /dev/null
+++ b/src/addon/shop/pages/member/my_coupon.vue
@@ -0,0 +1,220 @@
+<template>
+    <view class="bg-[#f8f8f8] min-h-screen overflow-hidden" :style="themeColor()" v-if="memberStore.info">
+        <view class="fixed left-0 top-0 right-0 z-10">
+            <scroll-view :scroll-x="true" class="scroll-Y box-border px-[var(--sidebar-m)] bg-white">
+                <view class="flex whitespace-nowrap justify-around items-center h-[88rpx]">
+                    <view :class="['text-[28rpx] text-[#333] h-[88rpx] leading-[88rpx] font-400', { 'class-select !text-primary': couponStatus === item.status }]" @click="statusClickFn(item.status)" v-for="(item, index) in statusList">{{ item.status_name }}({{ item.count }})</view>
+                </view>
+            </scroll-view>
+            <scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="'id' + (subActive ? subActive - 1 : 0)"  class="px-[var(--sidebar-m)]  box-border bg-white">
+				<view class="items-center flex h-[88rpx]">
+					<text class="flex-shrink-0 w-[126rpx] h-[54rpx] text-[24rpx] flex-center text-center text-[#333] bg-[var(--temp-bg)] rounded-[30rpx] box-border mr-[20rpx] border-[2rpx] border-solid border-[#F8F9FD]" :class="{'!text-primary !border-primary font-500 !bg-[var(--primary-color-light)]':item.value == curType}"
+						v-for="(item,index) in typeList" :key="index" :id="'id' + index"
+							@click="typeClick(index,item.value)">{{item.label}}
+						</text>
+				</view>
+			</scroll-view>
+        </view>
+
+        <mescroll-body ref="mescrollRef" top="176rpx" @init="mescrollInit" :down="{ use: false }" @up="getMyCouponListFn">
+            <view class="py-[var(--top-m)] px-[var(--sidebar-m)]" v-if="list.length">
+                <template v-for="(item, index) in list">
+
+                    <view v-if="couponStatus != 1"
+						class="flex items-center relative w-[100%] rounded-[var(--rounded-small)] overflow-hidden bg-[#fff]" :class="{'mt-[var(--top-m)]':index}">
+                        <view class=" w-[186rpx] h-[160rpx] flex  flex-col items-center justify-center rounded-[var(--rounded-small)] relative coupon-item" :class="{'bg-[#ffb4b1]':couponStatus == 2 , 'bg-[#ffe2e4]' :couponStatus == 3}">
+                            <view class="price-font flex items-baseline" :class="{'text-[#fff]' : couponStatus == 2 , 'text-[#FFB4B1]' : couponStatus == 3}">
+                                <text class="text-[30rpx] leading-[34rpx] mr-[2rpx] text-center price-font font-500">￥</text>
+                                <text class="text-[54rpx] font-500 leading-[58rpx] price-font truncate">{{ item.coupon_price }}</text>
+                            </view>
+							<text class="truncate max-w-[176rpx] mt-[6rpx] text-[24rpx] h-[32rpx] leading-[32rpx]" :class="{'text-[#fff]': couponStatus == 2 , 'text-[#FFB4B1]': couponStatus == 3}">{{ item.title }}</text>
+                        </view>
+                        <view class="ml-[30rpx] flex-1 h-[100%] box-border py-[20rpx]">
+                            <view class="text-[26rpx] leading-[40rpx] text-left font-500">
+                                <text v-if="item.min_condition_money === '0.00'">无门槛</text>
+                                <text v-else>满{{ item.coupon_min_price }}元可用</text>
+                            </view>
+                            <view class="mt-[10rpx] flex items-center">
+                                <text class="w-[80rpx] text-center bg-[#FFEFF0] whitespace-nowrap text-[#EF000C] text-[18rpx] h-[30rpx] leading-[30rpx] rounded-[15rpx] mr-[10rpx] flex-shrink-0">{{ item.type_name }}</text>
+                                <text class="truncate max-w-[226rpx] text-[24rpx] text-[var(--text-color-light6)] leading-[34rpx]">{{ item.title }}</text>
+                            </view>
+                            <view class="w-[100%] mt-[6rpx] text-[20rpx] leading-[34rpx] text-[var(--text-color-light6)]">
+                                <text>有效期至<text>{{ item.expire_time ? item.expire_time.slice(0, 10) : '' }}</text></text>
+                            </view>
+                        </view>
+						<view class="px-[20rpx]">
+                            <button class="flex-center rounded-full remove-border" :style="{width:'150rpx',height:'60rpx',color:'#fff', fontSize:'24rpx', padding:'0',border:'none',backgroundColor:'#FFB4B1'}" v-if="couponStatus == 2">已使用</button>
+                            <button class="flex-center rounded-full remove-border" :style="{width:'150rpx',height:'60rpx',color:'#FFB4B1', fontSize:'24rpx', padding:'0',border:'none',backgroundColor:'#FFE2E4'}" v-if="couponStatus == 3">已过期</button>
+                        </view>
+					</view>
+                    <view v-else class="flex items-center relative w-[100%] rounded-[var(--rounded-small)] overflow-hidden bg-[#fff]" :class="{'mt-[var(--top-m)]' : index}">
+                        <view class="coupon-bg w-[186rpx] h-[160rpx] flex  flex-col items-center justify-center rounded-[var(--rounded-small)] relative coupon-item">
+                            <view class="price-font flex items-baseline text-[#fff]">
+								<text class="text-[30rpx] leading-[34rpx] mr-[2rpx] text-center price-font font-500">￥</text>
+								<text class="text-[54rpx] font-500 leading-[58rpx] price-font truncate">{{ item.coupon_price }}</text>
+                            </view>
+							<text class="truncate max-w-[176rpx] mt-[6rpx] text-[22rpx] text-[#fff] h-[32rpx] leading-[32rpx]">{{ item.title }}</text>
+                        </view>
+                        <view class="ml-[30rpx] flex-1 h-[100%] box-border py-[20rpx]">
+                            <view class="text-[26rpx] leading-[40rpx] text-left font-500">
+                                <text v-if="item.min_condition_money === '0.00'">无门槛</text>
+                                <text v-else>满{{ item.coupon_min_price }}元可用</text>
+                            </view>
+                            <view class="text-[20rpx]  mt-[10rpx] flex items-center">
+                                <text class="w-[80rpx] text-center bg-[#FFEFF0] whitespace-nowrap text-[#EF000C] text-[18rpx] h-[30rpx] leading-[30rpx] rounded-[15rpx] mr-[10rpx] flex-shrink-0">{{ item.type_name }}</text>
+                                <text class="truncate max-w-[226rpx] text-[24rpx] text-[var(--text-color-light9)] leading-[34rpx]">{{ item.title }}</text>
+                            </view>
+                            <view class="w-[100%] mt-[6rpx] text-[20rpx] leading-[34rpx] text-[var(--text-color-light9)]">
+                                <text>有效期至<text>{{ item.expire_time ? item.expire_time.slice(0, 10) : '' }}</text></text>
+                            </view>
+                        </view>
+                        <view class="px-[20rpx]" v-if="couponStatus === 1">
+							<button hover-class="none" class="flex-center rounded-full remove-border primary-btn-bg" :style="{width:'150rpx',height:'60rpx',color:'#fff', fontSize:'24rpx', padding:'0',border:'none'}" @click="toLink(item.coupon_id)">去使用</button>
+                        </view>
+                    </view>
+                </template>
+            </view>
+            <mescroll-empty v-if="!list.length && loading" :option="{'tip' : '暂无优惠券'}"></mescroll-empty>
+        </mescroll-body>
+        <pay ref="payRef"></pay>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { img, redirect } from '@/utils/common'
+import { getMyCouponList, getMyCouponType, getMyCouponStatusCount } from '@/addon/shop/api/coupon'
+import useMemberStore from '@/stores/member'
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
+import { onLoad,onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import { t } from '@/locale'
+
+const memberStore = useMemberStore()
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
+const list = ref<Array<Object>>([]);
+const loading = ref<boolean>(false);
+const statusList = ref<Array<Object>>([]);
+const couponStatus = ref(1);
+
+const getMyCouponStatusCountFn = () =>{
+    getMyCouponStatusCount().then((res: any) =>{
+        statusList.value = res.data.filter((item: any) => item.status != 4)
+    })
+}
+const statusClickFn = (status: any) => {
+    couponStatus.value = status;
+    list.value = []; //如果是第一页需手动制空列表
+    getMescroll().resetUpScroll();
+};
+
+const getMyCouponListFn = (mescroll: any) => {
+    loading.value = false;
+    let data: object = {
+        page: mescroll.num,
+        limit: mescroll.size,
+        status: couponStatus.value,
+        type: curType.value
+    };
+
+    getMyCouponList(data).then((res: any) => {
+        let newArr = (res.data.data as Array<Object>);
+        //设置列表数据
+        if (mescroll.num == 1) {
+            list.value = []; //如果是第一页需手动制空列表
+        }
+        list.value = list.value.concat(newArr);
+        mescroll.endSuccess(newArr.length);
+        loading.value = true;
+    }).catch(() => {
+        loading.value = true;
+        mescroll.endErr(); // 请求失败, 结束加载
+    })
+}
+const toLink = (coupon_id:any) => {
+	redirect({ url: '/addon/shop/pages/goods/list',param:{coupon_id} })
+}
+
+// 类型
+const subActive = ref<number>(0)
+const curType = ref('all')
+const typeList = ref<Array<Object>>([])
+const getMyCouponTypeFn = () =>{
+    getMyCouponType().then((res: any) =>{
+        const obj = { label: '全部', value: 'all' };
+        typeList.value.push(obj)
+		typeList.value = typeList.value.concat(res.data)
+    })
+}
+onLoad(()=>{
+    getMyCouponTypeFn()
+    getMyCouponStatusCountFn()
+})
+
+const typeClick = (index : number,data:any) =>{
+    subActive.value = index
+    curType.value = data
+    list.value = []
+    getMescroll().resetUpScroll()
+}
+</script>
+
+<style lang="scss" scoped>
+    .remove-border {
+        &::after {
+            border: none;
+        }
+    }
+
+.class-select {
+    position: relative;
+    font-weight: 500 !important;
+
+    &::before {
+        content: "";
+        position: absolute;
+        bottom: 10rpx;
+        height: 6rpx;
+        background-color: $u-primary;
+        width: 40rpx;
+        left: 50%;
+		border-radius: 100rpx;
+        transform: translateX(-50%);
+    }
+}
+
+.coupon-bg{
+	background: linear-gradient( 169deg, #FF7C36 0%, #FF2D00 86%);
+}
+
+.coupon-item{
+	:before{
+		content: '';
+		display: block;
+		width: 28rpx;
+		height: 28rpx;
+		background-color: #f8f8f8;
+		position: absolute;
+		top: 50%;
+		left: -14rpx;
+		border-radius:14rpx;
+		transform: translateY(-50%);
+	}
+	:after{
+		content: '';
+		display: block;
+		width: 28rpx;
+		height: 28rpx;
+		background-color: #fff;
+		position: absolute;
+		top: 50%;
+		right: -14rpx;
+		border-radius:14rpx;
+		transform: translateY(-50%);
+	}
+}
+:deep(.mescroll-empty){
+	border-radius: var(--rounded-small) !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/newcomer/list.vue b/src/addon/shop/pages/newcomer/list.vue
new file mode 100644
index 0000000..c9a308f
--- /dev/null
+++ b/src/addon/shop/pages/newcomer/list.vue
@@ -0,0 +1,267 @@
+<template>
+	<view class="min-h-[100vh] bg-[#f6f6f6] overflow-hidden" :style="themeColor()">
+		<block v-if="Object.keys(configInfo).length &&configInfo.active_status =='active'">
+			<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getGoodsListFn">
+				<view class="marketing-head" v-if="!pageLoading">
+					<!-- #ifdef MP-WEIXIN -->
+					<top-tabbar :data="param" :isFill="false" class="top-header"/>
+					<image v-if="configInfo.banner_list && configInfo.banner_list.length" class="w-[100%] h-[434rpx]" :src="img(configInfo.banner_list[0].imageUrl)" mode="aspectFill"  @click="diyStore.toRedirect(configInfo.banner_list[0].toLink)"></image>
+					<!-- 占位作用 -->
+					<view v-else class="w-[100%] h-[434rpx]"></view>
+					<view v-if="configInfo.active_desc" class="side-tab" :style="{top: topStyle}"  @click="newcomerPopup = true">
+						 <text class="iconfont iconbiaoqianV6xx2 icon"></text>
+						<text class="desc">活动规则</text>
+					</view>
+					<!-- #endif -->
+					<!-- #ifdef H5 -->
+					<image v-if="configInfo.banner_list && configInfo.banner_list.length" class="w-[100%] h-[434rpx] -mt-[130rpx]" :src="img(configInfo.banner_list[0].imageUrl)" mode="aspectFill"  @click="diyStore.toRedirect(configInfo.banner_list[0].toLink)"></image>
+					<!-- 占位作用 -->
+					<view v-else class="w-[100%] h-[434rpx] -mt-[130rpx]"></view>
+					<view v-if="configInfo.active_desc" class="side-tab !top-[30rpx]" @click="newcomerPopup = true">
+						<text class="iconfont iconxinrenV6xx icon"></text>
+						<text class="desc">活动规则</text>
+					</view>
+					<!-- #endif -->
+					<view class="time newcomer-time" v-if="newcomerTime > 0 && newcomerTime != undefined" :style="{'background-image': 'url('+ img('addon/shop/newcomer/time_bg.png') +')'}">
+						<text class="text-[26rpx]">距结束还有：</text>
+						<up-count-down class="text-[#fff] min-w-[150rpx] text-[28rpx]" :time="newcomerTime" format="DD:HH:mm:ss" @change="onChange">
+							<view class="flex">
+								<view class="text-[24rpx] flex items-center" v-if="timeData.days && timeData.days>0">
+									<text class="min-w-[30rpx] text-right">{{ timeData.days }}</text>
+									<text class="text-[20rpx]">天</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="min-w-[30rpx] text-center" v-if="timeData.hours">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
+									<text class="min-w-[30rpx] text-center" v-else>00</text>
+									<text class="text-[20rpx]">时</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="min-w-[30rpx] text-center" v-if="timeData.minutes">{{ timeData.minutes >= 10 ? timeData.minutes :'0'+timeData.minutes }}</text>
+									<text class="min-w-[30rpx] text-center" v-else>00</text>
+									<text class="text-[20rpx]">分</text>
+								</view>
+								<view class="text-[24rpx] flex items-center">
+									<text class="min-w-[30rpx] text-center" v-if="timeData.seconds">{{ timeData.seconds<10 ? '0'+timeData.seconds : timeData.seconds}}</text>
+									<text class="min-w-[30rpx] text-center" v-else>00</text>
+									<text class="text-[20rpx]">秒</text>
+								</view>
+							</view>
+						</up-count-down>
+					</view>
+				</view>
+				<view class="marketing-list p-[20rpx] relative -mt-[50rpx]" v-if="goodsList.length">
+					<view class="bg-[#fff] flex rounded-[var(--rounded-mid)] p-[20rpx]" v-for="(item,index) in goodsList" :key="index" :class="{'mb-[20rpx]': (goodsList.length-1) != index}" @click="toDetail(item)">
+						<view class="w-[250rpx] h-[250rpx] flex items-center justify-center">
+							<image v-if="item.goods_cover" class="w-[250rpx] h-[250rpx] rounded-[var(--rounded-mid)]" :src="img(item.goods_cover_thumb_mid)" :mode="'aspectFill'" @error="item.goods_cover_thumb_mid='static/resource/images/diy/shop_default.jpg'"></image>
+							<image v-else class="w-[250rpx] h-[250rpx] rounded-[var(--rounded-mid)]" :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
+						</view>
+						<view class="flex flex-col flex-1 ml-[20rpx] pt-[4rpx]">
+							<view class="text-[28rpx] multi-hidden leading-[1.3]">{{item.goods_name}}</view>
+							<view class="w-[400rpx] flex items-center justify-center">
+								<image class="w-[400rpx] h-[106rpx] mt-[auto] mb-[10rpx]" :src="img('addon/shop/newcomer/subsidy.png')" mode="aspectFit"></image>
+							</view>
+							<view class="flex items-center justify-center btn-wrap">
+								<view class="flex items-center text-[#FFF3E0] relative z-4" :style="{'background': 'linear-gradient(to right, #FF8A04 0%, #ff1b1b 84%)'}">
+									<text class="text-[22rpx]">新人价</text>
+									<text class="text-[20rpx] ml-[6rpx] mr-[2rpx]">￥</text>
+									<text class="text-[36rpx] truncate max-w-[160rpx]">{{parseFloat(item.goodsSku.newcomer_price).toFixed(2)}}</text>
+								</view>
+								<image class="w-[26rpx] h-[54rpx]" :src="img('addon/shop/newcomer/btn_02.png')" mode="heightFix"></image>
+								<image class="w-[84rpx] h-[54rpx] relative ml-[-5rpx] z-2" :src="img('addon/shop/newcomer/btn_03.png')" mode="aspectFit"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+				<mescroll-empty v-else-if="!goodsList.length && loading" :option="{tip : '暂无商品，请看看其他商品吧！', btnText:'去逛逛'}" @emptyclick="redirect({ url: '/addon/shop/pages/goods/list' })"></mescroll-empty>
+			</mescroll-body>
+		</block>
+		<block v-if="!pageLoading && Object.keys(configInfo).length && configInfo.active_status !='active'">
+			<top-tabbar :data="pageNullParam" class="top-header"/>
+			<mescroll-empty :option="{tip : '活动未开启,请看看其他商品吧！', btnText:'去逛逛'}" @emptyclick="redirect({ url: '/addon/shop/pages/index' })"></mescroll-empty>
+		</block>
+		<view @touchmove.prevent.stop>
+			<u-popup :show="newcomerPopup" @close="closeFn" mode="center" round="var(--rounded-big)">
+				<view class="w-[570rpx] px-[32rpx] popup-common center">
+					<view class="title">活动规则</view>
+					<scroll-view :scroll-y="true" class="px-[30rpx] box-border max-h-[260rpx]" v-if="configInfo.active_desc">
+					    <block v-for="(item) in configInfo.active_desc.split('\n')">
+					        <view class="text-[28rpx] leading-[40rpx] mb-[20rpx]">{{ item }}</view>
+					    </block>
+					</scroll-view>
+					<view class="btn-wrap !pt-[40rpx]">
+					    <button class="primary-btn-bg w-[480rpx] h-[70rpx] text-[26rpx] leading-[70rpx] rounded-[35rpx] !text-[#fff] font-500"  @click="newcomerPopup = false">我知道了</button>
+					</view>
+				</view>
+			</u-popup>
+		</view>
+		<loading-page :loading="pageLoading"></loading-page>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, computed } from 'vue'
+import { t } from '@/locale'
+import { redirect, img, getToken, pxToRpx, timeTurnTimeStamp } from '@/utils/common';
+import { getNewcomerGoodsList, getNewcomersConfig } from '@/addon/shop/api/newcomer';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
+import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+import useDiyStore from '@/app/stores/diy';
+import { topTabar } from '@/utils/topTabbar'
+import { useLogin } from '@/hooks/useLogin'
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const goodsList = ref<Array<any>>([]);
+const mescrollRef = ref(null);
+const loading = ref<boolean>(false);
+const pageLoading = ref<boolean>(true);
+const diyStore = useDiyStore();
+// 获取系统状态栏的高度
+let menuButtonInfo: any = {};
+// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+// #endif
+/********* 自定义头部 - start ***********/
+const topTabarObj = topTabar()
+let param = topTabarObj.setTopTabbarParam({title:'',topStatusBar: {textColor: '#fff'}})
+let pageNullParam = topTabarObj.setTopTabbarParam({title:'新人专享列表',topStatusBar: {textColor: '#333'} })
+const topStyle = computed(() => {
+	let style = pxToRpx(Number(menuButtonInfo.height) + menuButtonInfo.top + 8)+ 30 + 'rpx;'
+	return style
+})
+/********* 自定义头部 - end ***********/
+
+
+/********* 倒计时 - start ***********/
+// 使用 reactive 创建响应式对象
+const timeData = ref({});
+// 定义 onChange 方法
+const onChange = (e) => {
+  timeData.value = e;
+};
+const newcomerTime = ref('');
+/********* 倒计时 - end ***********/
+
+/**************** 活动规则 ********************/
+const newcomerPopup = ref(false)
+const closeFn = () =>{
+	newcomerPopup.value = false
+}
+/**************** 活动规则 - end ********************/
+onLoad(async (option: any) => {
+	getNewcomersConfigFn();
+})
+
+const configInfo = ref({});
+const getNewcomersConfigFn = () => {
+	getNewcomersConfig().then((res: any) => {
+		configInfo.value = res.data;
+		let time = configInfo.value && configInfo.value.validity_time ? timeTurnTimeStamp(configInfo.value.validity_time) : 0;
+		pageLoading.value = false;
+	}).catch(()=>{
+		pageLoading.value = false;
+	})
+}
+
+interface mescrollStructure {
+	num: number,
+	size: number,
+	endSuccess: Function,
+	[propName: string]: any
+}
+
+const isJoin = ref(0) // 是否参与过新人专享活动，1：是，0：否
+const getGoodsListFn = (mescroll: mescrollStructure) => {
+	loading.value = false;
+	let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size
+	};
+	getNewcomerGoodsList(data).then((res: any) => {
+		isJoin.value = res.data.is_join;
+		let newArr = (res.data.data as Array<Object>);
+		let now = new Date();
+		let timestamp: any = now.getTime();
+		newcomerTime.value = Number(res.data.validity_time) * 1000 - timestamp;
+		//设置列表数据
+		if (Number(mescroll.num) === 1) {
+			goodsList.value = []; //如果是第一页需手动制空列表
+		}
+		goodsList.value = goodsList.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+		loading.value = true;
+
+	}).catch(() => {
+		loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+const toDetail = (data: any) => {
+	redirect({ url: '/addon/shop/pages/goods/detail', param: { sku_id: data.goodsSku.sku_id, type: 'newcomer_discount' } })
+}
+</script>
+
+<style lang="scss" scoped>
+.marketing-head{
+	position: relative;
+	.time{
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 44rpx;
+		line-height: 1;
+		font-size: 26rpx;
+		color: #fff;
+		width: 660rpx;
+		background-repeat: no-repeat;
+		bottom: 84rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		background-size: 100% 100%;
+	}
+}
+.marketing-list{
+	// background: linear-gradient(180deg, rgba(255,240,242, 1), rgba(255,255,255, 0) 35%);
+	background: linear-gradient( 180deg, #FFF2F0 23%, #F6F6F6 92%);
+	border-radius: 34rpx 34rpx 0 0;
+	.btn-wrap{
+		border-radius: 50rpx;
+		overflow: hidden;
+		align-self: center;
+		position: relative;
+		view{
+			height: 54rpx;
+			padding-left: 16rpx;
+			padding-right: 30rpx;
+		}
+		image:nth-of-type(1){
+			position: absolute;
+			right: 54rpx;
+			top: 0rpx;
+			height: 54rpx;
+			z-index: 5;
+		}
+	}
+}
+/*  #ifdef MP  */
+.newcomer-time{
+	animation: fadein .15s;
+}
+/* 进入动画 */
+@keyframes fadein {
+  0% {
+	opacity: 0;
+  }
+  99% {
+  	opacity: 0;
+  }
+  100% {
+	opacity: 1;
+  }
+}
+/*  #endif  */
+</style>
diff --git a/src/addon/shop/pages/order/components/address-list/address-list.vue b/src/addon/shop/pages/order/components/address-list/address-list.vue
new file mode 100644
index 0000000..0dfed88
--- /dev/null
+++ b/src/addon/shop/pages/order/components/address-list/address-list.vue
@@ -0,0 +1,100 @@
+<template>
+    <u-popup :show="show" @close="show = false" mode="bottom" :round="10">
+        <view @touchmove.prevent.stop class="popup-common">
+			<view class="title">{{t('selectAddress')}}</view>
+			<scroll-view scroll-y="true" class="h-[50vh]">
+				<view v-for="(item,index) in addressList" :key="item.id" class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]" :class="{'mb-[var(--top-m)]': addressList.length-1 != index, 'text-[var(--primary-color)] !border-[var(--primary-color)]': item.id == currAddressId}" @click="selectAddress(index)">
+					<text class="nc-iconfont nc-icon-dingweiV6xx-1 text-[36rpx]"></text>
+					<view class="flex flex-col mx-[20rpx] w-[480rpx]">
+						<view class="flex items-center truncate leading-[1.5]">
+							<text class="mr-[8rpx] text-[30rpx] truncate max-w-[300rpx]">{{item.name}}</text>
+							<text class="text-[30rpx]">{{item.mobile}}</text>
+						</view>
+						<view class="truncate text-[26rpx] leading-[1.5] mt-[12rpx]">{{item.full_address}}</view>
+					</view>
+					<text class="nc-iconfont nc-icon-xiugaiV6xx text-[32rpx] ml-auto" @click="editAddress(item)"></text>
+				</view>
+				<view v-if="!addressList || addressList && !addressList.length" class="text-[var(--text-color-light6)] text-[28rpx] text-center">{{t('emptyAddress')}}</view>
+			</scroll-view>
+			
+			<view class="btn-wrap">
+                <button class="primary-btn-bg btn" @click="addAddress">{{t('addAddress')}}</button>
+			</view>
+		</view>
+    </u-popup>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { getAddressList } from '@/app/api/member'
+    import { t } from '@/locale'
+    import { redirect } from '@/utils/common'
+
+    const show = ref(false)
+	const loading = ref(false)
+	const currAddressId = ref('') // 选中的索引
+	const propData: any = ref({})
+	const addressList: any = ref([])
+	
+	const emits = defineEmits(['confirm'])
+	
+    const open = (data: any) => {
+        show.value = true;
+		propData.value = data;
+		currAddressId.value = data.id;
+    }
+
+	getAddressList({}).then(({ data }) => {
+		addressList.value = data;
+	    loading.value = false
+	})
+	
+	const selectAddress = (index: number) => {
+		let data = addressList.value[index];
+		if(propData.value.delivery == 'local_delivery' && !data.lat && !data.lng){
+			// 待支付订单-同城配送，选择的地址没有经纬度的情况，会直接跳转到地图界面进行选择
+			// 参数二，表示是否直接跳转到地图界面, 1跳转到地图界面，2表示不跳
+			editAddress(data,1);
+		}else{
+			let obj:any = {}
+			obj.address_id = addressList.value[index].id
+			obj.delivery = propData.value.delivery
+			emits('confirm', obj)
+		}
+		show.value = false;
+	}
+	
+	const editAddress = (data: any, isSelectMap: number = 2)=>{
+		uni.setStorage({
+		    key: 'selectAddressCallback',
+		    data: {
+		        back: '/addon/shop/pages/order/payment',
+		        delivery: propData.value.delivery
+		    },
+		    success() {
+		        redirect({ url: '/app/pages/member/address_edit', param: { id: data.id, source: 'shop_order_payment', isSelectMap } })
+		    }
+		})
+	}
+
+	const addAddress = () =>{
+		uni.setStorage({
+		    key: 'selectAddressCallback',
+		    data: {
+		        back: '/addon/shop/pages/order/payment',
+		        delivery: propData.value.delivery
+		    },
+		    success() {
+		        redirect({ url: '/app/pages/member/address_edit', param: { source: 'shop_order_payment' } })
+		    }
+		})
+	}
+	
+    defineExpose({
+        open
+    })
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/addon/shop/pages/order/components/invoice/invoice.vue b/src/addon/shop/pages/order/components/invoice/invoice.vue
new file mode 100644
index 0000000..348daf2
--- /dev/null
+++ b/src/addon/shop/pages/order/components/invoice/invoice.vue
@@ -0,0 +1,188 @@
+<template>
+    <u-popup :show="invoicePop" @close="closeFn" mode="bottom" >
+		<!-- class="bg-[#fff] rounded-[10rpx] popup-common" @touchmove.prevent.stop -->
+        <view class="popup-common">
+			<view class="title">请填写发票信息</view>
+			<scroll-view :scroll-y="true"  class="h-[50vh]">
+				<view class="px-[var(--popup-sidebar-m)] pb-[60rpx] pt-0 text-sm ">
+					<u-form labelPosition="left" :model="formData" labelWidth="200rpx" :labelStyle="{'font-size': '28rpx'}" errorType='toast' :rules="rules" ref="formRef">
+						<view class="mt-[10rpx]">
+							<u-form-item label="需要发票" leftIconStyle="text-[28rpx]">
+								<view class="flex">
+									<view
+										class="h-[60rpx] box-border rounded px-[30rpx] leading-[56rpx] mr-[20rpx] border-[2rpx] border-[var(--temp-bg)] bg-[var(--temp-bg)] border-solid text-[24rpx]"
+										:class="{'!bg-[var(--primary-color-light)] !text-[var(--primary-color)] !border-primary': !need}"
+										@click="need = false">不需要</view>
+									<view class="h-[60rpx] box-border rounded px-[30rpx] leading-[56rpx] border-[2rpx] border-[var(--temp-bg)] border-solid text-[24rpx] bg-[var(--temp-bg)]"
+										:class="{'!bg-[var(--primary-color-light)] !text-[var(--primary-color)] !border-primary': need}"
+										@click="need = true">需要</view>
+								</view>
+							</u-form-item>
+						</view>
+						<view v-show="need">
+							<view class="mt-[10rpx]">
+								<u-form-item label="抬头类型">
+									<view class="flex">
+										<view
+											class="h-[60rpx] box-border rounded px-[30rpx] mr-[20rpx] leading-[56rpx] border-[2rpx] border-[var(--temp-bg)] border-solid text-[24rpx] bg-[var(--temp-bg)]"
+											:class="{'!bg-[var(--primary-color-light)] !text-[var(--primary-color)] !border-primary': formData.header_type == 1}"
+											@click="formData.header_type = 1">个人</view>
+										<view class="h-[60rpx] box-border rounded px-[30rpx] leading-[56rpx] border-[2rpx] border-[var(--temp-bg)] border-solid text-[24rpx] bg-[var(--temp-bg)]"
+											:class="{'!bg-[var(--primary-color-light)] !text-[var(--primary-color)] !border-primary': formData.header_type == 2}"
+											@click="formData.header_type = 2">企业</view>
+									</view>
+								</u-form-item>
+							</view>
+							<view class="mt-[10rpx]">
+								<u-form-item label="发票内容" prop="header_name">
+									<view class="flex flex-wrap">
+										<block v-for="(item,index) in config.invoice_content">
+											<view class="box-border rounded px-[20rpx] py-[12rpx] leading-[1.4] border-[2rpx] border-[var(--temp-bg)] border-solid text-[24rpx] bg-[var(--temp-bg)] my-[10rpx]"
+												:class="{'!bg-[var(--primary-color-light)] !text-[var(--primary-color)] !border-primary': formData.name == item, 'mr-[20rpx]': (config.invoice_content.length-1) != index}"
+												@click="formData.name = item">{{ item  }}</view>
+										</block>
+									</view>
+								</u-form-item>
+							</view>
+							<view class="mt-[10rpx]">
+								<u-form-item label="发票抬头" prop="header_name">
+									<u-input fontSize="28rpx" v-model.trim="formData.header_name" border="none" placeholder-class="!text-[var(--text-color-light9)] text-[28rpx]" clearable placeholder="请输入发票抬头" ></u-input>
+								</u-form-item>
+							</view>
+							<view v-if="formData.header_type == 2">
+								<view class="mt-[10rpx]">
+									<u-form-item label="纳税人识别号" prop="tax_number">
+										<u-input fontSize="28rpx" v-model.trim="formData.tax_number" border="none" clearable placeholder="请输入纳税人识别号" placeholder-class="!text-[var(--text-color-light9)] text-[28rpx]" @change="inputChange"></u-input>
+									</u-form-item>
+								</view>
+								<!-- <view class="py-[20rpx] h-[48rpx] flex items-center">
+									<text class="text-[30rpx]">更多选填内容</text>
+									<text class="text-xs text-gray-subtitle ml-[10rpx]">注册地址、电话、开户银行及账号</text>
+									<view class="text-xs text-right flex-1" @click="optionalShow = !optionalShow">
+										<text>{{ optionalShow ? '收起' : '展开' }}</text>
+										<text class="text-[30rpx] nc-iconfont text-gray-subtitle ml-[5rpx]" :class="optionalShow ? 'nc-icon-shangV6xx-1' : 'nc-icon-xiaV6xx'"></text>
+									</view>
+								</view> -->
+								<view class="mt-[10rpx]">
+									<u-form-item label="注册地址">
+										<u-input fontSize="28rpx" v-model="formData.address" placeholder-class="!text-[var(--text-color-light9)] text-[28rpx]" border="none" clearable placeholder="(选填)请输入企业注册地址"></u-input>
+									</u-form-item>
+								</view>
+								<view class="mt-[10rpx]">
+									<u-form-item label="注册电话">
+										<u-input fontSize="28rpx" v-model="formData.telephone" placeholder-class="!text-[var(--text-color-light9)] text-[28rpx]" border="none" clearable placeholder="(选填)请输入企业注册电话"></u-input>
+									</u-form-item>
+								</view>
+								<view class="mt-[10rpx]">
+									<u-form-item label="开户银行">
+										<u-input fontSize="28rpx" v-model="formData.bank_name" placeholder-class="!text-[var(--text-color-light9)] text-[28rpx]" border="none" clearable placeholder="(选填)请输入企业开户银行"></u-input>
+									</u-form-item>
+								</view>
+								<view class="mt-[10rpx]">
+									<u-form-item label="银行账号">
+										<u-input fontSize="28rpx" v-model="formData.bank_card_number" placeholder-class="!text-[var(--text-color-light9)] text-[28rpx]" border="none" clearable placeholder="(选填)请输入企业开户银行账号"></u-input>
+									</u-form-item>
+								</view>
+							</view>
+						</view>
+					</u-form>
+				</view>
+			</scroll-view>
+			<view class="btn-wrap">
+                <button class="primary-btn-bg btn" @click="confirm">确认</button>
+			</view>
+		</view>
+    </u-popup>
+</template>
+
+<script setup lang="ts">
+    import { ref, computed,nextTick } from 'vue'
+    import { getInvoiceConfig } from '@/addon/shop/api/config'
+
+    const invoicePop = ref(false)
+    const config = ref({
+        is_invoice: 2,
+        invoice_content: []
+    })
+    const need = ref(false)
+    const optionalShow = ref(false)
+    const formData: any = ref({
+        header_type: 1,
+        header_name: '',
+        type: '',
+        name: '',
+        tax_number: '',
+        telephone: '',
+        address: '',
+        bank_name: '',
+        bank_card_number: ''
+    })
+
+    const invoiceOpen = computed(() => {
+        return config.value.is_invoice == 1
+    })
+
+    getInvoiceConfig().then(({ data }) => {
+        config.value = data
+        data.invoice_content.length && (formData.value.name = data.invoice_content[0])
+    }).catch()
+
+	const inputChange = (e: any) =>{
+		nextTick(()=>{
+			formData.value.tax_number = e.replace(/[^0-9a-zA-Z]/g,'')
+		})
+	}
+
+    const formRef: any = ref(null)
+
+    const rules = computed(() => {
+        return {
+            'header_name': {
+                type: 'string',
+                required: need.value,
+                message: '请输入发票抬头',
+                trigger: ['blur', 'change'],
+            },
+            'tax_number': [{
+                type: 'string',
+                required: need.value && formData.value.header_type == 2,
+                message: '请输入纳税人识别号',
+                trigger: ['blur', 'change'],
+            }, {
+                validator(rule: any, value: any, callback: any) {
+                    const limit = /^[0-9a-zA-Z]+$/;
+                    if (!limit.test(value) && formData.header_type == 2) {
+                        callback(new Error('请输入正确的纳税人识别号'))
+                    } else {
+                        callback()
+                    }
+                }
+            }]
+        }
+    })
+
+    const open = () => {
+		invoicePop.value = true;
+    }
+
+    const emits = defineEmits(['confirm'])
+
+    const confirm = () => {
+        formRef.value.validate().then(() => {
+            const invoice = need.value ? formData.value : {}
+            emits('confirm', invoice)
+             invoicePop.value = false;
+        })
+    }
+	const closeFn = () =>{
+		invoicePop.value = false;
+	}
+
+    defineExpose({
+        open,
+        invoiceOpen
+    })
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/addon/shop/pages/order/components/logistics-tracking/logistics-tracking.vue b/src/addon/shop/pages/order/components/logistics-tracking/logistics-tracking.vue
new file mode 100644
index 0000000..a0e3b9b
--- /dev/null
+++ b/src/addon/shop/pages/order/components/logistics-tracking/logistics-tracking.vue
@@ -0,0 +1,114 @@
+<template>
+	<view @touchmove.prevent.stop>
+		<u-popup :show="showpop" mode="bottom" :round="10" @close="close" :closeable="true" :safeAreaInsetBottom="true" @touchmove.prevent.stop>
+			<view class="h-[70vh] px-[24rpx] bg-page pb-[20rpx]" @touchmove.prevent.stop v-if="Object.keys(showList).length">
+				<view class="font-500 text-center text-[32rpx] leading-[104rpx] box-border h-[104rpx]">{{t('detailedInformation')}}</view>
+				<scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="'id' + (subActive>3 ? subActive - 2 : 0)" >
+					<view class="flex py-[22rpx] whitespace-nowrap" v-if="packageList.length > 1">
+						<view :id="'id' + index" class="text-[26rpx] leading-[36rpx] mr-[30rpx] text-[#626779]" :class="{'!text-primary class-select': item.id ==  current}" v-for="(item,index) in packageList" :key="index" @click="handleClick(item,index)">{{ item.name }}</view>
+					</view>
+				</scroll-view>
+				<view class="text-[28rpx] mt-[20rpx] ">
+					<view class="flex justify-between mb-[20rpx]">
+						<template v-if="showList.sub_delivery_type == 'none_express'">
+							<text class="mr-[20rpx]">无需物流</text>
+						</template>
+						<template v-else>
+							<text class="mr-[20rpx]">{{showList.company.company_name}}</text>
+							<view>
+								<text class="mr-[14rpx]">{{showList.express_number}}</text>
+								<text @click="copy(showList.express_number)">{{t('copy')}}</text>
+							</view>
+						</template>
+					</view>
+				</view>
+				<view class="parcel" style="height: 53vh;" v-if="showList.sub_delivery_type == 'express'">
+					<view class="h-[56vh] flex flex-col items-center justify-center" v-if="showList.traces.success == false">
+						<text class="nc-iconfont nc-icon-daishouhuoV6xx text-[180rpx] text-[#bfbfbf]"></text>
+						<view class="text-[28rpx] text-[#bfbfbf] leading-8">暂无物流信息～～</view>
+					</view>
+					<scroll-view v-else :scroll-y="true" style="height:53vh;padding: 20rpx;box-sizing: border-box;" class="bg-white rounded-md">
+						<u-steps :current="0" dot direction="column" activeColor="var(--primary-color)">
+							<block v-for="(item,index) in showList.traces.list" :key="index + 'id'">
+								<u-steps-item :title="item.remark" :desc="item.datetime"></u-steps-item>
+							</block>
+						</u-steps>
+					</scroll-view>
+				</view>
+				<view  style="height: 53vh;" v-else-if="showList.sub_delivery_type == 'none_express'">
+					<view class="h-[56vh] flex-col flex items-center justify-center">
+						<text class="nc-iconfont nc-icon-daishouhuoV6xx text-[180rpx] text-[#bfbfbf]"></text>
+						<view class="text-[28rpx] text-[#bfbfbf] leading-8">无需物流～～</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script setup lang="ts">
+    import {ref} from 'vue'
+    import {t} from '@/locale'
+    import {img, redirect, copy} from '@/utils/common';
+    import {getMaterialflowList} from '@/addon/shop/api/order';
+
+    const showpop = ref(false)
+    const packageList = ref([])
+    const showList = ref<any>({})
+    const loadList = async (params: any) => {
+        let data: any = await getMaterialflowList(params)
+        showList.value = data.data
+    }
+	const current = ref(0)
+	const  subActive = ref(0)
+
+    const open = (params: any) => {
+		current.value= params.id
+        loadList(params)
+        showpop.value = true
+    }
+	
+    const close = () => {
+        showpop.value = false
+    }
+    const handleClick = (item: any,index:number) => {
+        current.value = item.id
+		subActive.value = index
+        let params = {
+            id: item.id,
+            mobile: item.mobile
+        }
+        loadList(params)
+    }
+    defineExpose({
+        packageList,
+        open
+    })
+</script>
+
+<style lang="scss" scoped>
+	.parcel :deep(.u-text__value) {
+		font-size: 24rpx !important;
+		line-height: 42rpx !important;
+	}
+
+	.parcel :deep(.u-steps-item__content) {
+		margin-left: 20rpx !important;
+	}
+	.class-select {
+    position: relative;
+    font-weight: 500;
+
+    &::before {
+        content: "";
+        position: absolute;
+        bottom: -6rpx;
+        height: 4rpx;
+        background-color: $u-primary;
+        width: 26rpx;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+</style>
+
diff --git a/src/addon/shop/pages/order/components/select-coupon/select-coupon.vue b/src/addon/shop/pages/order/components/select-coupon/select-coupon.vue
new file mode 100644
index 0000000..03a830a
--- /dev/null
+++ b/src/addon/shop/pages/order/components/select-coupon/select-coupon.vue
@@ -0,0 +1,134 @@
+<template>
+    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
+		<view @touchmove.prevent.stop class="popup-common">
+			<view class="title">请选择优惠券</view>
+			<view v-if="!type" class="-mt-[20rpx]">
+				<u-tabs :list="tabs" @click="switchTab" :current="current" itemStyle="width:50%;height:88rpx;box-sizing: border-box; font-size: 28rpx;" 
+				:activeStyle="{
+					color: 'var(--primary-color)'
+				}" lineColor="var(--primary-color)"></u-tabs>
+			</view>
+			<scroll-view scroll-y="true" class="h-[50vh] pt-[10rpx]">
+				<view class="px-[var(--popup-sidebar-m)] pb-[30rpx] pt-0 text-sm" v-show="current == 0">
+					<view class="mt-[var(--top-m)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] border-1 border-[#eee] border-solid rounded-[20rpx]"
+						:class="{'!border-[var(--primary-color)] bg-[var(--primary-color-light2)]': coupon && coupon.id == item.id}"
+						v-for="item in couponList"
+						@click="selectCoupon(item)">
+						<view class="flex border-0 !border-b border-[#eee] border-dashed pb-[20rpx]" :class="{ '!border-[var(--primary-color)]': coupon && coupon.id == item.id }">
+							<view class="flex-1 w-0">
+								<view class="text-[30rpx] mb-[20rpx] font-500">{{ item.title }}</view>
+								<view class="text-[24rpx] text-[var(--text-color-light6)]" v-if="item.min_condition_money > 0">满{{ item.min_condition_money }}可用</view>
+								<view class="text-[24rpx] text-[var(--text-color-light6)]" v-else>无门槛券</view>
+							</view>
+							<view class="text-[36rpx] price-font"><text class="text-xs mr-[2rpx]">￥</text>{{ item.price }}</view>
+						</view>
+						<view class="pt-[20rpx] text-[24rpx] text-[var(--text-color-light6)]">{{ item.create_time }} ~ {{ item.expire_time }}有效</view>
+					</view>
+				</view>
+				<view class="px-[var(--popup-sidebar-m)] pb-[30rpx] pt-0 text-sm" v-show="current == 1">
+					<view class="mt-[var(--top-m)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] border-1 !border-[#eee] border-solid rounded-[var(--rounded-mid)] bg-[var(--temp-bg)]" v-for="item in disabledCouponList">
+						<view class="flex border-0 !border-b !border-[#ddd] border-dashed pb-[20rpx]">
+							<view class="flex-1 w-0">
+								<view class="text-[30rpx] mb-[20rpx] font-500">{{ item.title }}</view>
+								<view class="text-[24rpx] text-[var(--text-color-light9)]" v-if="item.min_condition_money > 0">满{{ item.min_condition_money }}可用</view>
+								<view class="text-[24rpx] text-[var(--text-color-light9)]" v-else>无门槛券</view>
+							</view>
+							<view class="text-[36rpx] price-font"><text class="text-xs mr-[2rpx]">￥</text>{{ item.price }}</view>
+						</view>
+						<view class="pt-[20rpx] text-[24rpx]  text-[var(--text-color-light9)]">{{ item.create_time }} ~ {{ item.expire_time }}期间有效</view>
+						<view class="text-[24rpx] pt-[10rpx] flex  text-[var(--text-color-light9)]">
+							不可用原因：{{ item.error }}
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="btn-wrap">
+                <button class="primary-btn-bg btn" @click="confirm">确认</button>
+			</view>
+		</view>
+    </u-popup>
+</template>
+
+<script setup lang="ts">
+    import { ref, watch, computed } from 'vue'
+    import { orderCoupon } from '@/addon/shop/api/order'
+
+    const prop = defineProps({
+        orderKey: {
+            type: String,
+            default: ''
+        }
+    })
+
+    const current = ref(0)
+    const couponList = ref<object[]>([])
+    const disabledCouponList = ref<object[]>([])
+    const show = ref(false)
+    const coupon = ref<null | object>(null)
+    const emits = defineEmits(['confirm'])
+
+    watch(() => prop.orderKey, () => {
+        if (prop.orderKey && !couponList.value.length) {
+            orderCoupon({order_key: prop.orderKey}).then(({data}) => {
+                const list = [], disabled = []
+
+                if (data.length) {
+                    data.forEach(item => {
+                        item.is_normal ? list.push(item) : disabled.push(item)
+                    })
+                }
+
+                disabledCouponList.value = disabled
+                couponList.value = list
+
+                if (list.length) {
+                    coupon.value = list[0]
+                    emits('confirm', coupon.value)
+                }
+            }).catch()
+        }
+    }, { immediate: true })
+
+    const tabs = computed(() => {
+        return [
+            { name: `可用优惠券(${couponList.value.length})`, key: 'normal' },
+            { name: `不可用优惠券(${disabledCouponList.value.length})`, key: 'disabled' }
+        ]
+    })
+
+    const switchTab = (event: any)=> {
+        current.value = event.index
+    }
+
+    const open = (coupon_id:any)=> {
+        show.value = true
+	    if(coupon_id){
+	        for(let i=0;i<couponList.value.length;i++){
+	            if(couponList.value[i].id == coupon_id){
+                    coupon.value = couponList.value[i];
+	                break;
+	            }
+	        }
+	    }
+    }
+
+    const selectCoupon = (data: object)=> {
+        if (coupon.value) {
+            coupon.value = coupon.value.id != data.id ? data : null
+        } else {
+            coupon.value = data
+        }
+    }
+
+    const confirm = ()=> {
+        emits('confirm', coupon.value)
+        show.value = false
+    }
+
+    defineExpose({
+    	open,
+        couponList
+    })
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/addon/shop/pages/order/components/select-store/select-store.vue b/src/addon/shop/pages/order/components/select-store/select-store.vue
new file mode 100644
index 0000000..f13cb01
--- /dev/null
+++ b/src/addon/shop/pages/order/components/select-store/select-store.vue
@@ -0,0 +1,140 @@
+<template>
+    <u-popup :show="show" @close="show = false" mode="bottom" :round="10">
+        <view @touchmove.prevent.stop class="popup-common">
+			<view class="title">请选择自提点</view>
+			<scroll-view scroll-y="true" class="h-[50vh]">
+				<view class="p-[var(--popup-sidebar-m)] pt-0 text-sm">
+					<view class="mt-[var(--top-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] mb-[var(--top-m)]" :class="{'!border-primary bg-[var(--primary-color-light2)]': store && store.store_id == item.store_id}" v-for="item in storeList" @click="selectStore(item)">
+						<view class="flex">
+							<view class="flex-1 w-0">
+								<text class="text-[30rpx] text-[#333]">{{ item.store_name }}</text>
+								<text class="text-[26rpx] ml-[12rpx] text-[var(--text-color-light6)]">{{ item.store_mobile }}</text>
+							</view>
+							<view v-if="item.distance">
+								<text class="text-red text-[26rpx] font-normal">{{ distanceFormat(item.distance) }}</text>
+							</view>
+						</view>
+						<view class="mt-[20rpx] text-[26rpx] leading-[1.4] flex">
+							<text class="flex-shrink-0">门店地址：</text>
+							<text>{{ item.full_address }}</text>
+						</view>
+						<view class="mt-[16rpx] text-[26rpx]">营业时间：{{ item.trade_time }}</view>
+					</view>
+				</view>
+				<view class="h-[50vh] flex items-center flex-col justify-center" v-if="loading">
+					<u-loading-icon :vertical="true"></u-loading-icon>
+				</view>
+				<view class="h-[95%] flex items-center flex-col justify-center" v-if="!loading && !storeList.length">
+					<u-empty text="没有可选择的自提点" width="214" :icon="img('static/resource/images/empty.png')"/>
+				</view>
+			</scroll-view>
+			<view class="btn-wrap">
+                <button class="primary-btn-bg btn" @click="confirm">确认</button>
+			</view>
+		</view>
+    </u-popup>
+</template>
+
+<script setup lang="ts">
+    import { ref,reactive } from 'vue'
+    import { getStoreList } from '@/addon/shop/api/order'
+    import { img } from '@/utils/common'
+
+    const show = ref(false)
+    const loaded = ref(false)
+    const loading = ref(true)
+    const storeList = ref<object[]>([])
+    const store = ref<null | object>(null)
+
+    const latlng = reactive({
+        lat:0,
+        lng:0
+    })
+	
+	const getStoreListFn = (callback:any)=>{
+		if (!loaded.value) {
+		    loaded.value = true
+			
+			if(uni.getStorageSync('location_address')){
+				let location_address = uni.getStorageSync('location_address');
+				latlng.lat = location_address.latitude;
+				latlng.lng = location_address.longitude;
+			}else{
+				uni.getLocation({
+				    type: 'gcj02',
+				    success: (res) => {
+					    latlng.lat = res.latitude
+					    latlng.lng = res.longitude
+				    },
+				    fail: (res) => {
+					    if (res.errno) {
+						    if (res.errno == 104) {
+							    let msg = '用户未授权隐私权限，获取位置失败';
+							    uni.showToast({ title: msg, icon: 'none' })
+						    } else if (res.errno == 112) {
+							    let msg = '隐私协议中未声明，获取位置失败';
+							    uni.showToast({ title: msg, icon: 'none' })
+						    }
+					    }
+					    if (res.errMsg) {
+						    if (res.errMsg.indexOf('getLocation:fail') != -1 || res.errMsg.indexOf('deny') != -1 || res.errMsg.indexOf('denied') != -1) {
+							    let msg = '用户未授权获取位置权限，将无法提供距离最近的门店';
+							    uni.showToast({ title: msg, icon: 'none' })
+						    } else {
+							    uni.showToast({ title: res.errMsg, icon: 'none' })
+						    }
+					    }
+				    }
+				});
+			}
+		
+		    setTimeout(() => {
+			    getStoreList({ latlng }).then(({ data }) => {
+				    storeList.value = data
+					if(typeof callback == 'function'){
+						callback(data);
+					}
+				    loading.value = false
+			    }).catch(() => {
+				    loading.value = false
+			    })
+		    }, 1500)
+		}
+	}
+
+    const open = ()=> {
+	    show.value = true
+    }
+
+    const selectStore = (data: object)=> {
+        if (store.value) {
+            store.value = store.value.store_id != data.store_id ? data : null
+        } else {
+            store.value = data
+        }
+    }
+
+    const emits = defineEmits(['confirm'])
+
+    const confirm = ()=> {
+        emits('confirm', store.value)
+        show.value = false
+    }
+
+    const distanceFormat = (distance: any) => {
+        distance = parseFloat(distance)
+        if (distance < 1000) {
+            return `${distance}m`;
+        } else {
+            const km = (distance / 1000).toFixed(2)
+            return `${km}km`;
+        }
+    }
+
+    defineExpose({
+    	open,
+		getData: getStoreListFn
+    })
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/addon/shop/pages/order/detail.vue b/src/addon/shop/pages/order/detail.vue
new file mode 100644
index 0000000..93607d2
--- /dev/null
+++ b/src/addon/shop/pages/order/detail.vue
@@ -0,0 +1,726 @@
+<template>
+	<view :style="themeColor()">
+		<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
+			<view v-if="!loading" class="pb-20rpx">
+				<view v-if="detail.status_name" class="pl-[40rpx] pr-[50rpx] bg-linear pb-[100rpx]">
+					<!-- #ifdef MP-WEIXIN -->
+					<top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
+					<!-- #endif -->
+					<view class="flex justify-between items-center pt-[40rpx]">
+						<view class="text-[#fff] text-[36rpx] font-500 leading-[42rpx]">{{ detail.status_name.name }}</view>
+						<image v-if="detail.status == 1" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/payment.png')" mode="aspectFit" />
+						<image v-if="detail.status == 2" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/deliver_goods.png')" mode="aspectFit" />
+						<image v-if="detail.status == 3" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/receive.png')" mode="aspectFit" />
+						<image v-if="detail.status == 5" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/complete.png')" mode="aspectFit" />
+						<image v-if="detail.status == -1" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/close.png')" mode="aspectFit" />
+					</view>
+				</view>
+				<view class="sidebar-margin mt-[-86rpx] card-template" v-if="detail.delivery_type != 'virtual'">
+					<view v-if="detail.delivery_type == 'express'">
+						<view class="text-[#303133] flex">
+							<text class="nc-iconfont nc-icon-dizhiguanliV6xx text-[40rpx] pt-[12rpx] mr-[20rpx]"></text>
+							<view class="flex flex-col">
+								<view class="text-[30rpx] leading-[38rpx] overflow-hidden">
+									<text>{{ detail.taker_name }}</text>
+									<text class="ml-[15rpx]">{{ detail.taker_mobile }}</text>
+								</view>
+								<view class="mt-[12rpx] text-[24rpx] text-[var(--text-color-light6)] leading-[26rpx]">
+									{{detail.taker_full_address.split(detail.taker_address)[0]}}{{detail.taker_address}}
+								</view>
+							</view>
+
+						</view>
+					</view>
+					<view v-if="detail.delivery_type == 'store'">
+						<view class="flex items-center">
+							<view>
+								<u--image class="overflow-hidden" radius="var(--goods-rounded-mid)" width="100rpx" height="100rpx"
+									:src="img(detail.store.store_logo ? detail.store.store_logo : '')"
+									model="aspectFill">
+									<template #error>
+										<image class="w-[100rpx] h-[100rpx] rounded-[var(--goods-rounded-mid)] overflow-hidden" :src="img('addon/shop/store_default.png')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+							</view>
+							<view class="flex flex-col ml-[20rpx]">
+								<text class="text-[30rpx] font-500 text-[#303133] mb-[20rpx]">{{ detail.store.store_name }}</text>
+								<text class="text-[24rpx] text-[var(--text-color-light6)] mb-[14rpx]">{{ detail.store.trade_time }}</text>
+								<text class="text-[24rpx] text-[var(--text-color-light6)] leading-[1.4]">{{ detail.store.full_address }}</text>
+							</view>
+						</view>
+					</view>
+					<view class="flex" v-if="detail.delivery_type == 'local_delivery'">
+						<text @click="getAddress" class="nc-iconfont nc-icon-dizhiguanliV6xx text-[40rpx] pt-[12rpx] mr-[20rpx]"></text>
+						<view class="flex flex-col">
+							<view class="flex leading-[38rpx] overflow-hidden">
+								<text class="text-[30rpx]">{{ detail.taker_name }}</text>
+								<text class="text-[30rpx] ml-[15rpx]">{{ detail.taker_mobile }}</text>
+							</view>
+							<text class="text-[24rpx] mt-[12rpx] leading-[26rpx]">{{ detail.taker_full_address }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="sidebar-margin card-template p-[0] py-[var(--pad-top-m)] overflow-hidden" :class="{'pb-[var(--pad-top-m)]': detail.gift_goods.length <= 0}" :style="detail.delivery_type == 'virtual' ? 'margin-top: -86rpx' : 'margin-top: 20rpx'">
+					<view v-for="(goodsItem, goodsIndex) in detail.goods" :key="goodsIndex" class="px-[var(--pad-sidebar-m)]">
+						<view class="order-goods-item flex justify-between flex-wrap mb-[20rpx]">
+							<view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" @click="goodsEvent(goodsItem.goods_id)">
+								<u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="150rpx" height="150rpx"
+									:src="img(goodsItem.goods_image_thumb_small ? goodsItem.goods_image_thumb_small : '')"
+									model="aspectFill">
+									<template #error>
+										<image
+											class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
+											:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill">
+										</image>
+									</template>
+								</u--image>
+							</view>
+
+							<view class="ml-[20rpx] flex flex-1 flex-col justify-between">
+								<view>
+									<view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx] text-[#333]">{{ goodsItem.goods_name }}</view>
+									<view v-if="goodsItem.sku_name">
+										<view class="text-[22rpx] mt-[14rpx] text-[var(--text-color-light9)] truncate max-w-[490rpx] leading-[28rpx]">
+											{{ goodsItem.sku_name }}
+										</view>
+									</view>
+								</view>
+								<view v-if="goodsItem.manjian_info && Object.keys(goodsItem.manjian_info).length" class="flex items-center mt-[10rpx] mb-[auto]" @click.stop="manjianOpenFn(goodsItem.manjian_info)">
+									<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[20rpx] flex items-center justify-center w-[88rpx] h-[36rpx] mr-[6rpx]">满减送</view>
+									<text class="text-[22rpx] text-[#999]">{{goodsItem.manjian_info.manjian_name}}</text>
+								</view>
+								<view class="flex justify-between items-baseline leading-[28rpx] text-[#333]">
+									<view class="price-font">
+										<view class="text-[40rpx] inline-block" v-if="goodsItem.extend && parseFloat(goodsItem.extend.point) > 0">
+											<text class="text-[40rpx] font-200">{{goodsItem.extend.point}}</text>
+											<text class="text-[32rpx] ml-[4rpx]">积分</text>
+										</view>
+										<text class="mx-[4rpx] text-[32rpx]" v-if="parseFloat(goodsItem.price) && goodsItem.extend && parseFloat(goodsItem.extend.point) > 0">+</text>
+										<block v-if="parseFloat(goodsItem.price) && goodsItem.extend && parseFloat(goodsItem.extend.point) > 0">
+											<text class="text-[40rpx] font-200">{{ parseFloat(goodsItem.price).toFixed(2) }}</text>
+											<text class="text-[32rpx] ml-[4rpx]">元</text>
+										</block>
+										<block v-if="goodsItem.extend && goodsItem.extend && goodsItem.extend.is_newcomer">
+											<text class="text-[24rpx]">￥</text>
+											<text class="text-[40rpx] font-500">{{ parseFloat(goodsItem.price).toFixed(2).split('.')[0] }}</text>
+											<text class="text-[24rpx] font-500">.{{ parseFloat(goodsItem.price).toFixed(2).split('.')[1] }}</text>
+										</block>
+										<block v-if="!goodsItem.extend">
+											<text class="text-[24rpx]">￥</text>
+											<text class="text-[40rpx] font-500">{{ parseFloat(goodsItem.price).toFixed(2).split('.')[0] }}</text>
+											<text class="text-[24rpx] font-500">.{{ parseFloat(goodsItem.price).toFixed(2).split('.')[1] }}</text>
+										</block>
+									</view>
+									<text class="text-right text-[26rpx]">x{{ goodsItem.num }}</text>
+								</view>
+							</view>
+						</view>
+						<view class="flex items-center box-border mt-[8rpx]" v-if="goodsItem.extend && goodsItem.extend.is_newcomer && goodsItem.num>1">
+							<image class="h-[24rpx] w-[56rpx]" :src="img('addon/shop/newcomer.png')" mode="heightFix" />
+							<view class="text-[24rpx] text-[#FFB000] leading-[34rpx] ml-[8rpx]">第1{{goodsItem.unit}}，￥{{parseFloat(goodsItem.extend.newcomer_price).toFixed(2)}}/{{goodsItem.unit}}；第{{goodsItem.num>2?'2~'+goodsItem.num:'2'}}{{goodsItem.unit}}，￥{{parseFloat(goodsItem.price).toFixed(2)}}/{{goodsItem.unit}}</view>
+						</view>
+						<view class="flex justify-end w-[100%] mt-[30rpx]" v-if="(goodsItem.status != '1') || (goodsItem.is_enable_refund == 1)">
+							<view v-if="goodsItem.status != '1'"
+								class="text-[22rpx] text-[#303133] leading-[50rpx] px-[20rpx] border-[2rpx] border-solid border-[#999] rounded-full"
+								@click="redirect({ url: '/addon/shop/pages/refund/detail', param: { order_refund_no : goodsItem.order_refund_no } })">
+								查看退款</view>
+							<view v-else-if="goodsItem.is_enable_refund == 1"
+								class="text-[22rpx] text-[#303133]  leading-[50rpx] px-[20rpx] border-[2rpx] border-solid border-[#999] rounded-full ml-[20rpx]"
+								@click="applyRefund(goodsItem.order_goods_id)">申请退款</view>
+						</view>
+					</view>
+					<view class="pt-[20rpx] bg-[#f9f9f9] mt-[20rpx] mx-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)]" v-if="detail.gift_goods.length">
+						<view class="order-goods-item flex justify-between flex-wrap px-[var(--pad-sidebar-m)] pb-[20rpx]" v-for="(goodsItem, goodsIndex) in detail.gift_goods" :key="goodsIndex">
+							<view class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" @click="goodsEvent(goodsItem.goods_id)">
+								<u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="120rpx" height="120rpx"
+									:src="img(goodsItem.goods_image_thumb_small ? goodsItem.goods_image_thumb_small : '')"
+									model="aspectFill">
+									<template #error>
+										<image
+											class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
+											:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill">
+										</image>
+									</template>
+								</u--image>
+							</view>
+							<view class="ml-[16rpx] py-[8rpx] flex flex-1 flex-col justify-between">
+								<view class="flex items-center">
+									<view class="bg-[var(--primary-color-light)] whitespace-nowrap text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center w-[64rpx] h-[34rpx] mr-[6rpx]">赠品</view>
+									<view class="text-[26rpx] max-w-[400rpx] truncate leading-[40rpx] text-[#333]">{{ goodsItem.goods_name }}</view>
+								</view>
+								<view class="flex items-center">
+									<view v-if="goodsItem.sku_name" class="text-[22rpx] text-[var(--text-color-light9)] truncate max-w-[400rpx] leading-[28rpx]">
+										{{ goodsItem.sku_name }}
+									</view>
+									<view class="ml-[auto] font-400 text-[26rpx] text-[#303133]">
+										<text>x</text>
+										<text>{{ goodsItem.num }}</text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="sidebar-margin mt-[var(--top-m)] card-template">
+					<view class="justify-between card-template-item">
+						<view  class="text-[28rpx]">{{ t('orderNo') }}</view>
+						<view class="flex items-center text-[28rpx]">
+							<text>{{ detail.order_no }}</text>
+							<text class="w-[2rpx] h-[20rpx] bg-[#999] mx-[10rpx]"></text>
+							<text class="text-[#EF900A]" @click="copy(detail.order_no)">复制</text>
+						</view>
+					</view>
+					<view v-if="detail.out_trade_no" class="justify-between card-template-item">
+						<view class="text-[28rpx]">{{ t('orderTradeNo') }}</view>
+						<view class="text-[28rpx]">{{ detail.out_trade_no }}</view>
+					</view>
+					<view class="justify-between card-template-item">
+						<view class="text-[28rpx]">{{ t('createTime') }}</view>
+						<view class="text-[28rpx]">{{ detail.create_time }}</view>
+					</view>
+					<view class=" card-template-item justify-between">
+						<view class="text-[28rpx]">{{ t('deliveryType') }}</view>
+						<view class="text-[28rpx]">{{ detail.delivery_type_name }}</view>
+					</view>
+					<view v-if="detail.pay" class=" card-template-item justify-between !mb-[18rpx]">
+						<view class="text-[28rpx]">{{ t('payTypeName') }}</view>
+						<view class="text-[28rpx]">{{ detail.pay.type_name }}</view>
+					</view>
+					<view v-if="detail.pay && detail.member_id !== detail.pay.main_id && detail.pay.status == 2 " class="card-template-item justify-end">
+						<view class="friend-pay relative px-[20rpx] py-[12rpx] bg-[#F2F2F2] rounded-[10rpx] flex items-center">
+							<u-avatar :src="img(detail.pay.pay_member_headimg)" size="20" leftIcon="none" :default-url="img('static/resource/images/default_headimg.png')"  />
+							<text class="ml-[14rpx] text-[24rpx] using-hidden">{{ detail.pay.pay_member }}{{ t('helpPay') }}</text>
+						</view>
+					</view>
+					<view v-if="detail.pay" class=" card-template-item justify-between">
+						<view class="text-[28rpx]">{{ t('payTime') }}</view>
+						<view class="text-[28rpx]">{{ detail.pay.pay_time }}</view>
+					</view>
+					
+				</view>
+				<!-- 核销码 -->
+				<block v-if="isShowVerify">
+					<view class="sidebar-margin  mt-[var(--top-m)] card-template" v-if="verifyInfo && verifyInfo.length">
+						<swiper class="h-[450rpx]" circular indicator-dots="true" v-if="verifyInfo.length > 1">
+							<swiper-item v-for="(item,index) in verifyInfo" :key="index">
+								<view class="flex flex-col items-center justify-center">
+									<image :src="item.qrcode" class="w-[300rpx] h-[auto]" mode="widthFix"></image>
+								</view>
+								<view class="flex items-center justify-center mt-[30rpx]">
+									<text class="text-[28rpx] font-500">{{item.code}}</text>
+									<text
+										class="text-[var(--text-color-light6)] text-[24rpx] ml-[10rpx] border-[2rpx] border-solid border-[#666] bg-[#f7f7f7] px-[12rpx] py-[6rpx] rounded"
+										@click="copy(item.code)">复制</text>
+								</view>
+							</swiper-item>
+						</swiper>
+						<block v-else>
+							<view class="flex flex-col items-center justify-center">
+								<image :src="verifyInfo[0].qrcode" class="w-[300rpx] h-[auto]" mode="widthFix"></image>
+							</view>
+							<view class="flex items-center justify-center mt-[30rpx]">
+								<text class="text-[28rpx] font-500">{{verifyInfo[0].code}}</text>
+								<text
+									class="text-[var(--text-color-light6)] text-[24rpx] ml-[10rpx] border-[2rpx] border-solid border-[#666] bg-[#f7f7f7] px-[12rpx] py-[6rpx] rounded"
+									@click="copy(verifyInfo[0].code)">复制</text>
+							</view>
+						</block>
+
+					</view>
+					<view class="sidebar-margin mt-[var(--top-m)] card-template">
+						<view class="title">核销信息</view>
+						<view class="card-template-item justify-between">
+							<view class="text-[28rpx]">核销次数</view>
+							<view class="price-font font-500 text-[28rpx]">
+								{{'剩余'+(verifyGoodsData.num - verifyGoodsData.verify_count)+'次'}}/{{'共'+verifyGoodsData.num+'次'}}
+							</view>
+						</view>
+						<view class="card-template-item justify-between">
+							<view class="text-[28rpx]">有效期</view>
+							<view class="price-font font-500 text-[28rpx]">
+								{{verifyGoodsData.verify_expire_time ? verifyGoodsData.verify_expire_time : '永久'}}
+							</view>
+						</view>
+					</view>
+				</block>
+				<view class="sidebar-margin mt-[var(--top-m)] card-template">
+					<view class="card-template-item justify-between">
+						<view class="text-[28rpx]">{{ t('goodsMoney') }}</view>
+						<view class="price-font font-500">
+							<text v-if="parseFloat(detail.point) > 0" class="text-[28rpx]">{{detail.point}}积分</text>
+							<text v-if="parseFloat(detail.point) > 0 && parseFloat(detail.goods_money)" class="mx-[4rpx] text-[28rpx]">+</text>
+							<block v-if="parseFloat(detail.goods_money) || !parseFloat(detail.point)">
+								<text class="text-[28rpx]">￥</text>
+								<text class="text-[28rpx]">{{ parseFloat(detail.goods_money).toFixed(2).split('.')[0] }}</text>
+								<text class="text-[28rpx]">.{{ parseFloat(detail.goods_money).toFixed(2).split('.')[1] }}</text>
+							</block>
+						</view>
+					</view>
+					<view class=" card-template-item justify-between" v-if="parseFloat(detail.delivery_money)">
+						<view class="text-[28rpx]">{{ t('deliveryMoney') }}</view>
+						<view class="price-font font-500 text-[28rpx]">
+							￥{{ parseFloat(detail.delivery_money).toFixed(2) }}
+						</view>
+					</view>
+					<!-- <view class=" card-template-item justify-between">
+						<view class="text-[28rpx]">{{ t('discountMoney') }}</view>
+						<view class="price-font font-500 text-[28rpx]">
+							-￥{{ parseFloat(detail.discount_money).toFixed(2) }}
+						</view>
+					</view> -->
+					<view class=" card-template-item justify-between" v-if="parseFloat(detail.coupon_money)">
+						<view class="text-[28rpx]">优惠券优惠</view>
+						<view class="price-font font-500 text-[28rpx]">
+							-￥{{ parseFloat(detail.coupon_money).toFixed(2) }}
+						</view>
+					</view>
+					<view class=" card-template-item justify-between" v-if="parseFloat(detail.manjian_discount_money)">
+						<view class="text-[28rpx]">满减优惠</view>
+						<view class="price-font font-500 text-[28rpx]">
+							-￥{{ parseFloat(detail.manjian_discount_money).toFixed(2) }}
+						</view>
+					</view>
+					<view class=" card-template-item justify-between items-baseline">
+						<view class="text-[28rpx]">{{ t('orderMoney') }}</view>
+						<view class="text-[var(--price-text-color)] price-font">
+							<text v-if="parseFloat(detail.point) > 0" class="text-[28rpx]">{{detail.point}}积分</text>
+							<text v-if="parseFloat(detail.point) > 0 && parseFloat(detail.order_money)" class="mx-[4rpx] text-[28rpx]">+</text>
+							<text v-if="parseFloat(detail.order_money) || !parseFloat(detail.point)" class="text-[28rpx]">￥{{ parseFloat(detail.order_money).toFixed(2) }} </text>
+						</view>
+					</view>
+				</view>
+
+				<view class="flex z-2 justify-between items-center bg-[#fff] fixed left-0 right-0 bottom-0 min-h-[100rpx] pl-[30rpx] pr-[20rpx] flex-wrap  pb-ios">
+					<view class="flex">
+						<view class="flex  mr-[34rpx] flex-col justify-center items-center" @click="orderBtnFn('index')">
+							<view class="nc-iconfont nc-icon-shouyeV6xx11 text-[36rpx]"></view>
+							<text class="text-[20rpx] mt-[10rpx]">{{t('index')}}</text>
+						</view>
+						<!-- #ifdef MP-WEIXIN -->
+						<view>
+							<nc-contact :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg">
+								<view class="flex flex-col justify-center items-center">
+									<view class="w-[36rpx] h-[36rpx] flex-center">
+										<text class="nc-iconfont nc-icon-kefuV6xx-1 text-[34rpx]"></text>
+									</view>
+									<text class="text-[20rpx] mt-[10rpx]">客服</text>
+								</view>
+							</nc-contact>
+						</view>
+						<!-- #endif -->
+					</view>
+					<view class="flex justify-end">
+						<view class="min-w-[180rpx]  box-border text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#999] rounded-full ml-[20rpx] text-[var(--text-color-light6)]"
+							@click="orderBtnFn('logistics')" v-if="showLogistics(detail)">
+							{{ t('logisticsTracking') }}
+						</view>
+						<view class="min-w-[180rpx] box-border text-[26rpx]  h-[70rpx] flex-center text-center border-[2rpx] border-solid border-[#999] rounded-full ml-[20rpx] text-[var(--text-color-light6)]"
+							 v-if="detail.status == 1" @click="orderBtnFn('close')">{{ t('orderClose') }}</view>
+						<view class="min-w-[180rpx] box-border  text-[26rpx] h-[70rpx] flex-center text-center text-[#fff] primary-btn-bg rounded-full ml-[20rpx]"
+							 v-if="detail.status == 1" @click="orderBtnFn('pay')">{{ t('topay') }}</view>
+						<view v-if="detail.status == 3"
+							class="min-w-[180rpx] box-border  text-[26rpx] h-[70rpx] flex-center text-center  text-[#fff]  primary-btn-bg rounded-full ml-[20rpx]"
+							@click="orderBtnFn('finish')">{{ t('orderFinish') }}</view>
+						<block v-if="detail.status == 5 && isShowEvaluate">
+							<view
+								v-if="detail.is_evaluate == 1 || (detail.is_evaluate != 1 && evaluateConfig.is_evaluate == 1)"
+								class="min-w-[180rpx] box-border text-[26rpx]  h-[70rpx] flex-center border-[2rpx] border-solid border-[#999] rounded-full ml-[20rpx] !text-[var(--text-color-light6)]"
+								@click="orderBtnFn('evaluate')">
+								{{ detail.is_evaluate == 1 ? t('selectedEvaluate') : t('evaluate') }}
+							</view>
+						</block>
+					</view>
+				</view>
+			</view>
+			<view class="tab-bar-placeholder"></view>
+			<pay ref="payRef" @close="payClose"></pay>
+			<logistics-tracking ref="materialRef"></logistics-tracking>
+			<!-- 满减 -->
+			<ns-goods-manjian ref="manjianShowRef"></ns-goods-manjian>
+		</view>
+
+		<loading-page :loading="loading"></loading-page>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, reactive, computed,nextTick } from 'vue';
+	import { onLoad } from '@dcloudio/uni-app'
+	import { t } from '@/locale'
+	import { img, redirect, copy, goback } from '@/utils/common';
+	import { getShopOrderDetail, orderClose, orderFinish } from '@/addon/shop/api/order';
+	import { getEvaluateConfig } from '@/addon/shop/api/shop';
+	import { getVerifyCode } from '@/app/api/verify';
+	import logisticsTracking from '@/addon/shop/pages/order/components/logistics-tracking/logistics-tracking.vue'
+	import useConfigStore from "@/stores/config";
+	import nsGoodsManjian from '@/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue';
+	import { topTabar } from '@/utils/topTabbar';
+	import { cloneDeep } from 'lodash-es';
+
+	/********* 自定义头部 - start ***********/
+	const topTabarObj = topTabar()
+	let topTabbarData = topTabarObj.setTopTabbarParam({ title: '订单详情' })
+	/********* 自定义头部 - end ***********/
+
+	const detail: any = ref<Object>({});
+	const loading = ref<boolean>(true);
+	const type = ref('')
+	const orderId = ref('')
+	const orderStepsShow = ref(false)
+	const evaluateConfig = ref<Object>({});
+	const isShowEvaluate = ref(true)
+	const manjianShowRef: any = ref(null); //满减送
+
+	const sendMessageTitle = ref('')
+	const sendMessagePath = ref('')
+	const sendMessageImg = ref('')
+
+	const wxPrivacyPopupRef:any = ref(null)
+
+	onLoad((option: any) => {
+        if(option.order_id){
+            orderId.value = option.order_id;
+            orderDetailFn(orderId.value);
+            // #ifdef MP
+            nextTick(()=>{
+                if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+            })
+            // #endif
+        }else{
+            let parameter = {
+				url:'/addon/shop/pages/order/list',
+				title: '缺少订单id'
+			};
+			goback(parameter)
+        }
+	});
+
+	getEvaluateConfig().then(({ data }) => {
+		evaluateConfig.value = data
+	})
+
+	const orderDetailFn = (id: any) => {
+		loading.value = true;
+		getShopOrderDetail(id).then((res: any) => {
+			detail.value = res.data;
+			if (res.data.order_goods && res.data.order_goods.length && isShowVerify.value) {
+				let obj: any = {};
+				obj.order_goods_id = res.data.order_goods[0].order_goods_id
+				getVerifyCodeFn(obj);
+			}
+			
+			detail.value.goods = []; //购买商品
+			detail.value.gift_goods = []; //赠品
+			detail.value.order_goods.forEach((item,index)=>{
+				if(item.is_gift){
+					detail.value.gift_goods.push(item);
+				}else{
+					detail.value.goods.push(item);
+				}
+			})
+			
+			
+
+			let evaluateCount = 0;
+			for (let i = 0; i < detail.value.order_goods.length; i++) {
+				if (detail.value.order_goods[i].status != 1 || detail.value.order_goods[i].is_enable_refund == 1) {
+					evaluateCount++;
+				}
+			}
+
+			if (evaluateCount == detail.value.order_goods.length) {
+				isShowEvaluate.value = false;
+			}
+
+			sendMessageTitle.value = detail.value.order_goods[0].goods_name
+			sendMessageImg.value = img(detail.value.order_goods[0].goods_image_thumb_small || '')
+			loading.value = false;
+		}).catch(() => {
+			loading.value = false;
+		})
+	}
+	
+	// 满减
+	const manjianOpenFn = (data:any) =>{
+		let obj = {};
+		obj.condition_type = cloneDeep(data).condition_type;
+		obj.rule_json = [cloneDeep(data).rule];
+		obj.name = cloneDeep(data).manjian_name;
+		manjianShowRef.value.open(obj);
+	}
+
+	//关闭订单
+	const close = (item : any) => {
+		uni.showModal({
+			title: '提示',
+			content: '您确定要关闭该订单吗？',
+			confirmColor: useConfigStore().themeColor['--primary-color'],
+			success: res => {
+				if (res.confirm) {
+					orderClose(item.order_id).then((data) => {
+						orderDetailFn(item.order_id);
+					})
+				}
+			}
+		})
+	}
+
+	//订单完成
+	const finish = (item : any) => {
+		// 如果不在微信小程序中
+		// #ifndef MP-WEIXIN
+		uni.showModal({
+			title: '提示',
+			content: '您确定物品已收到吗？',
+			confirmColor: useConfigStore().themeColor['--primary-color'],
+			success: res => {
+				if (res.confirm) {
+					orderFinish(item.order_id).then((data) => {
+						orderDetailFn(item.order_id);
+					})
+				}
+			}
+		})
+		// #endif
+
+		// #ifdef MP-WEIXIN
+		// 检测微信小程序是否已开通发货信息管理服务
+		if (item.pay && item.pay.type == 'wechatpay' && item.is_trade_managed && wx.openBusinessView) {
+			wx.openBusinessView({
+				businessType: 'weappOrderConfirm',
+				extraData: {
+					merchant_id: item.mch_id,
+					merchant_trade_no: item.out_trade_no
+				},
+				success: (res : any) => {
+					orderFinish(item.order_id).then((data) => {
+						orderDetailFn(item.order_id);
+					})
+				},
+				fail: (res : any) => {
+					console.log('小程序确认收货组件打开失败 fail', res);
+				}
+			})
+		} else {
+			uni.showModal({
+				title: '提示',
+				content: '您确定物品已收到吗？',
+				confirmColor: useConfigStore().themeColor['--primary-color'],
+				success: res => {
+					if (res.confirm) {
+						orderFinish(item.order_id).then((data) => {
+							orderDetailFn(item.order_id);
+						})
+					}
+				}
+			})
+		}
+		// #endif
+	}
+
+	const goodsEvent = (id : number) => {
+		if (detail.value.activity_type == 'exchange') {
+			redirect({
+				url: '/addon/shop/pages/point/detail',
+				param: {
+					id: detail.value.relate_id
+				}
+			})
+		} else {
+			redirect({
+				url: '/addon/shop/pages/goods/detail',
+				param: {
+					goods_id: id
+				}
+			})
+		}
+	}
+
+	const payRef = ref(null)
+	const materialRef: any = ref(null)
+	const orderBtnFn = (type = '') => {
+		if (type == 'pay')
+			payRef.value?.open(detail.value.order_type, detail.value.order_id, `/addon/shop/pages/order/detail?order_id=${detail.value.order_id}`);
+		else if (type == 'close') {
+			close(detail.value);
+		} else if (type == 'finish') {
+			finish(detail.value);
+		} else if (type == 'index') {
+			redirect({
+				url: '/addon/shop/pages/index',
+				mode: 'reLaunch'
+			});
+		} else if (type == 'logistics') {
+			if (detail.value.order_delivery.length > 0) {
+				let params = {
+					id: detail.value.order_delivery[0].id,
+					mobile: detail.value.taker_mobile
+				}
+				let list : any = []
+				detail.value.order_delivery.forEach((item : any, index : number) => {
+					item.name = `包裹${index + 1}`
+					list.push(item)
+				})
+
+				materialRef.value.open(params);
+				materialRef.value.packageList = list
+			}
+		} else if (type == 'evaluate') {
+			if (!detail.value.is_evaluate) {
+				redirect({ url: '/addon/shop/pages/evaluate/order_evaluate', param: { order_id: detail.value.order_id } })
+			} else {
+				redirect({ url: '/addon/shop/pages/evaluate/order_evaluate_view', param: { order_id: detail.value.order_id } })
+			}
+		}
+	}
+	const dateFormat = (res: any, type: any) => {
+		let data;
+		if (res.indexOf('/') != -1) {
+			data = res.split("/");
+		} else if (res.indexOf('-') != -1) {
+			data = res.split("-");
+		}
+
+		let time;
+		const index = new Date(res).getDay();
+		const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+		if (type == "yearMonthDay") {
+			time = data[0] + '年' + data[1] + '月' + data[2] + '日';
+		} else if (type == "yearMonthDayWeek") {
+			time = data[0] + '年' + data[1] + '月' + data[2] + '日 ' + week[index];
+		} else if (type == "monthDayWeek") {
+			time = data[1] + '月' + data[2] + '日 ' + week[index];
+		} else {
+			time = data[1] + '月' + data[2] + '日';
+		}
+
+		return time;
+	}
+
+	const applyRefund = (orderGoodsId : number) => {
+		redirect({
+			url: '/addon/shop/pages/refund/apply',
+			param: {
+				order_id: detail.value.order_id,
+				order_goods_id: orderGoodsId
+			}
+		})
+	}
+
+	const getAddress = () => {
+		uni.openLocation({
+			latitude: Number(detail.value.taker_latitude),
+			longitude: Number(detail.value.taker_longitude),
+			success: function () { }
+		});
+	}
+
+	const showLogistics = (data : any) => {
+		let status = false
+		if (data.delivery_type != 'express') return false;
+		for (let i = 0; i < data.order_delivery.length; i++) {
+			let item = data.order_delivery[i];
+			if (item.sub_delivery_type === 'express' && data.status === '3') {
+				status = true;
+				break;
+			} else if (item.sub_delivery_type === 'express' && data.status === '5') {
+				status = true;
+				break;
+			} else {
+				status = false
+			}
+		}
+		return status
+	}
+
+	/************ 虚拟商品核销-start ***************/
+	const verifyGoodsData = ref({}) //虚拟商品
+	const isShowVerify = computed(() => {
+		let bool =  false;
+		if(detail.value.order_goods.length == 1){
+			verifyGoodsData.value = detail.value.order_goods[0]
+
+			let data = detail.value.order_goods[0];
+			bool = data.is_verify == 1 && data.goods_type == 'virtual' && data.delivery_status == 'delivery_finish' && detail.value.status == 3 ? true : false;
+		}
+		return bool
+	})
+	const verifyInfo = ref([])
+	const getVerifyCodeFn = (data:any) => {
+		verifyInfo.value = [];
+
+		getVerifyCode('shopVirtualGoods', data).then((res: any) => {
+			verifyInfo.value = res.data;
+		})
+	}
+	/************ 虚拟商品核销-end ***************/
+</script>
+<style lang="scss" scoped>
+	.text-item {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.order-goods-item:nth-child(1) {
+		margin-top: 0rpx;
+	}
+
+	.text-color {
+		color: $u-primary;
+	}
+
+	.bg-color {
+		background-color: $u-primary;
+	}
+
+	.bg-linear {
+		background: linear-gradient(94deg, #F84949 8%, #FF9A68 99%);
+	}
+
+	.triangle {
+		@apply relative;
+
+		&::before {
+			content: "";
+			@apply absolute;
+			width: 0;
+			height: 0;
+			position: absolute;
+			bottom: -40rpx;
+			border: 20rpx solid #EEF3FF;
+			border-left-color: transparent;
+			border-right-color: transparent;
+			border-bottom-color: transparent;
+		}
+	}
+
+	.tab-bar-placeholder {
+		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
+		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
+	}
+	:deep(.u-image__error){
+		background-color: transparent !important;
+	}
+	.friend-pay{
+		&::after{
+			content: '';
+			display: block;
+			width: 20rpx;
+			height: 20rpx;
+			background-color: #f2f2f2;
+			position: absolute;
+			right: 30rpx;
+			top: 0;
+			transform: translateY(-50%) rotate(45deg);
+			border-radius: 4rpx;
+		}
+	}
+</style>
diff --git a/src/addon/shop/pages/order/list.vue b/src/addon/shop/pages/order/list.vue
new file mode 100644
index 0000000..83b7af6
--- /dev/null
+++ b/src/addon/shop/pages/order/list.vue
@@ -0,0 +1,329 @@
+<template>
+	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden order-list" :style="themeColor()">
+		<view class="fixed left-0 top-0 right-0 z-10" v-if="statusLoading">
+			<scroll-view :scroll-x="true" class="tab-style-2">
+				<view class="tab-content">
+					<view class="tab-items" :class="{ 'class-select': orderState === item.status.toString() }" @click="orderStateFn(item.status)" v-for="(item, index) in orderStateList">{{ item.name }}</view>
+				</view>
+			</scroll-view>
+		</view>
+
+		<mescroll-body ref="mescrollRef" top="88rpx" @init="mescrollInit" :down="{ use: false }" @up="getShopOrderFn">
+			<view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
+				<template v-for="(item, index) in list" :key="index">
+					<view class="mb-[var(--top-m)] card-template">
+						<view @click.stop="toLink(item)">
+							<view class="flex justify-between items-center">
+								<view class="text-[#303133] text-[26rpx] font-400 leading-[36rpx]">
+									<text>{{ t('orderNo') }}:</text>
+									<text class="ml-[10rpx]">{{ item.order_no }}</text>
+									<text class="text-[#303133] text-[26rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]" @click.stop="copy(item.order_no)"></text>
+								</view>
+								<view class="text-[#303133] text-[26rpx] leading-[34rpx]" :class="{'text-primary': item.status  == 1,'!text-[var(--text-color-light9)]' :item.status  == 5 || item.status  == -1}">{{ item.status_name.name }}</view>
+							</view>
+							<block v-for="(subItem, index) in item.order_goods" :key="index">
+								<view class="flex box-border mt-[20rpx]">
+									<u--image width="150rpx" height="150rpx" :radius="'var(--goods-rounded-big)'" :src="img(subItem.goods_image_thumb_small ? subItem.goods_image_thumb_small : '')" mode="aspectFill">
+										<template #error>
+											<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+										</template>
+									</u--image>
+									<view class="ml-[20rpx] flex flex-1 flex-col box-border">
+										<view class="flex justify-between items-baseline">
+											<view class="max-w-[322rpx] text-[28rpx] leading-[40rpx] font-400 truncate text-[#303133]">{{ subItem.goods_name }}</view>
+											<block v-if="item.activity_type == 'exchange'">
+												<view class="text-right ml-[10rpx] leading-[42rpx]" v-if="parseFloat(subItem.price)">
+													<text class="text-[22rpx] font-400 price-font">￥</text>
+													<text class="text-[36rpx] font-500 price-font">{{parseFloat(subItem.price).toFixed(2).split('.')[0] }}</text>
+													<text class="text-[22rpx] font-500 price-font">.{{parseFloat(subItem.price).toFixed(2).split('.')[1] }}</text>
+												</view>
+											</block>
+											<block v-else>
+												<view class="text-right leading-[42rpx] ml-[10rpx]">
+													<text class="text-[22rpx] price-font">￥</text>
+													<text class="text-[36rpx] font-500 price-font">{{parseFloat(subItem.price).toFixed(2).split('.')[0] }}</text>
+													<text class="text-[22rpx] font-500 price-font">.{{parseFloat(subItem.price).toFixed(2).split('.')[1] }}</text>
+												</view>
+											</block>
+										</view>
+										<view class="flex justify-between items-baseline text-[#303133] mt-[14rpx]">
+											<view>
+												<view class="text-[24rpx] text-[var(--text-color-light6)] font-400 truncate leading-[34rpx] max-w-[369rpx] mb-[10rpx]" v-if="subItem.sku_name">{{ subItem.sku_name }}</view>
+												<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)]" v-if="item.delivery_type != 'virtual'">
+													{{t('deliveryType') }} ： {{item.delivery_type_name}}
+												</view>
+												<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)]" v-else>{{t('createTime') }} ：{{item.create_time}}</view>
+											</view>
+											<text class="text-right text-[26rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ subItem.num }}</text>
+										</view>
+									</view>
+								</view>
+								<view class="flex items-center box-border mt-[8rpx]" v-if="subItem.extend && subItem.extend.is_newcomer && subItem.num > 1">
+									<image class="h-[24rpx] w-[56rpx]" :src="img('addon/shop/newcomer.png')" mode="heightFix" />
+									<view class="text-[24rpx] text-[#FFB000] leading-[34rpx] ml-[8rpx]">第1{{subItem.unit}}，￥{{parseFloat(subItem.extend.newcomer_price).toFixed(2)}}/{{subItem.unit}}；第{{subItem.num>2?'2~'+subItem.num:'2'}}{{subItem.unit}}，￥{{parseFloat(subItem.price).toFixed(2)}}/{{subItem.unit}}</view>
+								</view>
+							</block>
+						</view>
+						<view class="flex justify-end items-center mt-[20rpx]">
+							<view class="flex items-baseline">
+								<view class="text-[22rpx] text-[var(--text-color-light9)] leading-[30rpx] mr-[6rpx]" v-if="parseFloat(item.delivery_money)">{{ t('service') }}</view>
+								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">{{ t('actualPayment') }}：</view>
+								<view class="leading-[1] text-[var(--price-text-color)]">
+									<block v-if="item.activity_type == 'exchange'">
+										<text class="text-[36rpx] mr-[2rpx] leading-[40rpx] price-font font-500">{{ item.point }}</text>
+										<text  class="text-[20rpx] leading-[28rpx] font-500">{{ t('point') }}</text>
+										<block v-if="parseFloat(item.order_money)">
+											<text class="text-[20rpx] mx-[4rpx] font-500 leading-[28rpx]">+</text>
+											<text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{ parseFloat(item.order_money).toFixed(2) }}</text>
+											<text class="text-[20rpx] font-500 leading-[28rpx] ml-[2rpx]">{{ t('money') }}</text>
+										</block>
+									</block>
+									<block v-else>
+										<text class="text-[22rpx] leading-[26rpx] price-font">￥</text>
+										<text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{ parseFloat(item.order_money).toFixed(2).split('.')[0]  }}</text>
+										<text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{ parseFloat(item.order_money).toFixed(2).split('.')[1]  }}</text>
+									</block>
+								</view>
+							</view>
+						</view>
+						<view class="flex justify-end text-[28rpx] mt-[20rpx] items-center" v-if="(item.status == 1) || (item.status == 3) || (item.status == 5 && item.is_show_evaluate && evaluateConfig.is_evaluate == 1)">
+							<view class="text-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full text-[var(--text-color-light6)] box-border" v-if="item.status == 1" @click.stop="orderBtnFn(item, 'close')">{{ t('orderClose') }}</view>
+							<view class="text-[24rpx] font-500 flex-center h-[56rpx] min-w-[150rpx] text-center border-[0] text-[#fff] primary-btn-bg rounded-full ml-[20rpx] box-border" v-if="item.status == 1" @click.stop="orderBtnFn(item, 'pay')">{{ t('topay') }}</view>
+							<view class="text-[24rpx] font-500 flex-center h-[56rpx] min-w-[150rpx] text-center border-[0] text-[#fff] primary-btn-bg rounded-full ml-[20rpx] box-border" v-if="item.status == 3" @click.stop="orderBtnFn(item, 'finish')">{{ t('orderFinish') }}</view>
+							<view class="text-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full ml-[20rpx]  text-[var(--text-color-light6)] box-border" v-if="item.status == 5 && item.is_show_evaluate && evaluateConfig.is_evaluate == 1" @click.stop="orderBtnFn(item, 'evaluate')">{{ item.is_evaluate == 1 ? t('selectedEvaluate') : t('evaluate') }}</view>
+						</view>
+					</view>
+				</template>
+			</view>
+			<mescroll-empty v-if="!list.length && loading" :option="{tip : '暂无订单'}"></mescroll-empty>
+		</mescroll-body>
+		<pay ref="payRef" @close="payClose"></pay>
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref,nextTick } from 'vue';
+import { t } from '@/locale'
+import { img, redirect,copy } from '@/utils/common'
+import { getShopOrderStatus, getShopOrder, orderClose, orderFinish } from '@/addon/shop/api/order';
+import { getEvaluateConfig } from '@/addon/shop/api/shop';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import { onLoad, onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
+import useConfigStore from "@/stores/config";
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const list = ref<Array<Object>>([]);
+const loading = ref<boolean>(false);
+const statusLoading = ref<boolean>(false);
+const orderState = ref('')
+const orderStateList: any = ref([]);
+const evaluateConfig = ref("")
+
+const mch_id = ref('')
+const isTradeManaged = ref(false)
+
+const wxPrivacyPopupRef:any = ref(null)
+
+onLoad((option: any) => {
+	orderState.value = option.status || "";
+	evaluateEvent()
+	getShopOrderStatusFn();
+	// #ifdef MP
+	nextTick(()=>{
+		if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+	})
+	// #endif
+});
+	
+
+onShow(() => {
+	nextTick(()=>{
+		// 评价完成之后，会返回到订单列表，需要请求最新数据
+		if(getMescroll()){ getMescroll().resetUpScroll();}
+	})
+})
+
+const evaluateEvent = () => {
+	getEvaluateConfig().then((data: any) => {
+		evaluateConfig.value = data.data
+	})
+}
+
+const getShopOrderFn = (mescroll: any) => {
+	loading.value = false;
+	let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size,
+		status: orderState.value
+	};
+
+	getShopOrder(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>);
+		//设置列表数据
+		if (mescroll.num == 1) {
+			list.value = []; //如果是第一页需手动制空列表
+		}
+
+		newArr.forEach((item:any)=> {
+			item.is_show_evaluate = true;
+			let evaluateCount = 0;
+			for (let i = 0; i < item.order_goods.length; i++) {
+				if (item.order_goods[i].status != 1 || item.order_goods[i].is_enable_refund == 1) {
+					evaluateCount++;
+				}
+			}
+			if (evaluateCount == item.order_goods.length) {
+				item.is_show_evaluate = false;
+			}
+		})
+
+		list.value = list.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+
+        mch_id.value = res.data.mch_id;
+        isTradeManaged.value = res.data.is_trade_managed;
+		loading.value = true;
+	}).catch(() => {
+		loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+const getShopOrderStatusFn = () => {
+	statusLoading.value = false;
+	orderStateList.value = [];
+	let obj = { name: '全部', status: '' };
+	orderStateList.value.push(obj);
+
+	getShopOrderStatus().then((res: any) => {
+		Object.values(res.data).forEach((item, index) => {
+			orderStateList.value.push(item);
+		});
+		statusLoading.value = true;
+	}).catch(() => {
+		statusLoading.value = true;
+	})
+}
+
+const orderStateFn = (status: any) => {
+	orderState.value = status.toString();
+	list.value = [];
+	getMescroll().resetUpScroll();
+};
+
+const toLink = (data: any) => {
+	redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: data.order_id } })
+}
+
+// 支付
+const payRef = ref(null)
+const orderBtnFn = (data: any, type = '') => {
+	if (type == 'pay')
+		payRef.value?.open(data.order_type, data.order_id, `/addon/shop/pages/order/detail?order_id=${data.order_id}`);
+	else if (type == 'close') {
+		close(data);
+	} else if (type == 'finish') {
+		finish(data);
+	} else if (type == 'evaluate') {
+		if (!data.is_evaluate) {
+			redirect({ url: '/addon/shop/pages/evaluate/order_evaluate', param: { order_id: data.order_id } })
+		} else {
+			redirect({ url: '/addon/shop/pages/evaluate/order_evaluate_view', param: { order_id: data.order_id } })
+		}
+	}
+}
+
+//关闭订单
+const close = (item: any) => {
+	uni.showModal({
+		title: '提示',
+		content: '您确定要关闭该订单吗？',
+        confirmColor: useConfigStore().themeColor['--primary-color'],
+		success: res => {
+			if (res.confirm) {
+				orderClose(item.order_id).then((data) => {
+					getMescroll().resetUpScroll();
+				})
+			}
+		}
+	})
+}
+
+//订单完成
+const finish = (item: any) => {
+    // 如果不在微信小程序中
+    // #ifndef MP-WEIXIN
+	uni.showModal({
+		title: '提示',
+		content: '您确定物品已收到吗？',
+        confirmColor: useConfigStore().themeColor['--primary-color'],
+		success: res => {
+			if (res.confirm) {
+				orderFinish(item.order_id).then((data) => {
+					getMescroll().resetUpScroll();
+				})
+			}
+		}
+	})
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    // 检测微信小程序是否已开通发货信息管理服务
+    if (item.pay && item.pay.type == 'wechatpay' && isTradeManaged.value && wx.openBusinessView) {
+        wx.openBusinessView({
+            businessType: 'weappOrderConfirm',
+            extraData: {
+                merchant_id: mch_id.value,
+                merchant_trade_no: item.out_trade_no
+            },
+            success: (res:any) => {
+                orderFinish(item.order_id).then((data) => {
+                    getMescroll().resetUpScroll();
+                })
+            },
+            fail: (res:any) => {
+                console.log('小程序确认收货组件打开失败 fail', res);
+            }
+        })
+    }else{
+        uni.showModal({
+            title: '提示',
+            content: '您确定物品已收到吗？',
+            confirmColor: useConfigStore().themeColor['--primary-color'],
+            success: res => {
+                if (res.confirm) {
+                    orderFinish(item.order_id).then((data) => {
+                        getMescroll().resetUpScroll();
+                    })
+                }
+            }
+        })
+    }
+    // #endif
+}
+</script>
+<style>
+.order-list .mescroll-body {
+	padding-bottom: constant(safe-area-inset-bottom) !important;
+	padding-bottom: env(safe-area-inset-bottom) !important;
+}
+.order-list :deep(.u-count-down__text){
+	font-size: 24rpx !important;
+	color:#EF000C !important;
+}
+</style>
+<style lang="scss" scoped>
+.text-color {
+	color: var(--primary-color);
+}
+
+.bg-color {
+	background-color: var(--primary-color);
+}
+</style>
diff --git a/src/addon/shop/pages/order/payment.vue b/src/addon/shop/pages/order/payment.vue
new file mode 100644
index 0000000..95ba883
--- /dev/null
+++ b/src/addon/shop/pages/order/payment.vue
@@ -0,0 +1,516 @@
+<template>
+    <view :style="themeColor()">
+        <view class="bg-[var(--page-bg-color)] min-h-[100vh]" v-if="orderData">
+			<view class="pt-[30rpx] sidebar-margin payment-bottom">
+                <!-- 配送方式 -->
+                <view class="mb-[var(--top-m)] rounded-[var(--rounded-big)] bg-white" v-if="orderData.basic.has_goods_types.includes('real') && delivery_type_list.length">
+                    <view class="rounded-tl-[var(--rounded-big)] rounded-tr-[var(--rounded-big)] head-tab flex items-center w-full bg-[#F1F1F1]" v-if="delivery_type_list.length > 1">
+                        <view v-for="(item, index) in delivery_type_list" :key="index"  class="head-tab-item flex-1 relative" :class="{'active': index === activeIndex}">
+                            <view class="h-[74rpx] relative z-10 text-center leading-[74rpx] text-[28rpx]" @click="switchDeliveryType(item.key, index)">
+                                {{ item.name }}
+                            </view>
+                            <image v-if="index === activeIndex && delivery_type_list.length == 3" class="tab-image absolute bottom-[-2rpx] h-[94rpx] w-[240rpx]" :src="img(`addon/shop/payment/tab_${index}.png`)" mode="aspectFit"></image>
+                            <image v-else-if="index === activeIndex && delivery_type_list.length == 2" class="tab-img absolute  bottom-[-2rpx]  h-[95rpx] w-[354rpx]" :src="img(`addon/shop/payment/tabstyle_${index}.png`)" mode="aspectFit"></image>
+                        </view>
+                    </view>
+                    <view class="min-h-[140rpx] flex items-center px-[30rpx]">
+                        <!-- 收货地址 -->
+                        <view class="w-full" v-if="['express', 'local_delivery'].includes(createData.delivery.delivery_type)" @click="toSelectAddress">
+                            <view v-if="!$u.test.isEmpty(orderData.delivery.take_address)" class="pt-[20rpx] pb-[30rpx] flex items-center">
+								<image class="w-[60rpx] h-[60rpx] mr-[20rpx] flex-shrink-0" :src="img('addon/shop/payment/position_01.png')" mode="aspectFit"></image>
+								<view class="flex flex-col overflow-hidden">
+									<text class="text-[26rpx] text-[var(--text-color-light9)] mt-[16rpx] truncate max-w-[536rpx]">{{orderData.delivery.take_address.full_address.split(orderData.delivery.take_address.address)[0]}}</text>
+									<text class="font-500 text-[30rpx] mt-[14rpx] text-[#333] truncate max-w-[536rpx]">{{orderData.delivery.take_address.address}}</text>
+									<view class="flex items-center text-[26rpx] text-[var(--text-color-light6)] mt-[16rpx]">
+										<text class="mr-[16rpx]">{{ orderData.delivery.take_address.name }}</text>
+										<text>{{ mobileHide(orderData.delivery.take_address.mobile) }}</text>
+									</view>
+								</view>
+								<text class="ml-auto nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                            <view v-else class="flex items-center">
+                                <image class="w-[26rpx] h-[30rpx] mr-[10rpx]" :src="img('addon/shop/payment/position_02.png')" mode="aspectFit"></image>
+                                <text class="text-[28rpx]">添加收货地址</text>
+                                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)] ml-auto"></text>
+                            </view>
+                        </view>
+
+                        <!-- 自提点 -->
+                        <view class="flex items-center w-full" v-if="createData.delivery.delivery_type == 'store'" @click="storeRef.open()">
+                            <view v-if="!$u.test.isEmpty(orderData.delivery.take_store)" class="pt-[40rpx] pb-[30rpx] w-full flex items-center">
+								<view class="flex flex-col">
+									<view class="text-[30rpx] font-500 text-[#303133] mb-[20rpx]">{{ orderData.delivery.take_store.store_name }}</view>
+									<view class="text-[24rpx] text-[var(--text-color-light6)] mb-[20rpx] leading-[1.4] flex">
+                                        <text class="flex-shrink-0">门店地址：</text>
+                                        <text class="max-w-[490rpx]">{{ orderData.delivery.take_store.full_address }}</text> 
+                                    </view>
+									<view class="text-[24rpx] text-[var(--text-color-light6)] mb-[20rpx]">
+                                        <text>联系电话：</text>
+                                        <text>{{ orderData.delivery.take_store.store_mobile }}</text> 
+                                    </view>
+									<view class="text-[24rpx] text-[var(--text-color-light6)]">
+                                        <text>营业时间：</text>
+                                        <text>{{ orderData.delivery.take_store.trade_time }}</text>
+                                    </view>
+								</view>
+								<text class="ml-auto nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                            <view v-else class="flex items-center w-full">
+                                <image class="w-[26rpx] h-[30rpx] mr-[10rpx]" :src="img('addon/shop/payment/position_02.png')" mode="aspectFit"></image>
+                                <text class="text-[28rpx]">请选择自提点</text>
+                                <text class="ml-auto nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view v-if="orderData.basic.has_goods_types.includes('real') && !delivery_type_list.length" class="mb-[var(--top-m)] card-template h-[100rpx] flex items-center">
+                    <p class="text-[28rpx] text-[var(--primary-color)]">商家尚未配置配送方式</p>
+                </view>
+
+                <view class="mb-[var(--top-m)] card-template p-[0] pb-[var(--pad-top-m)]">
+					<view class="py-[var(--pad-top-m)]">
+						<view  class="mb-[20rpx] px-[var(--pad-sidebar-m)]" v-for="(item, index) in orderData.goods" :key="index">
+							<view class="flex">
+								<u--image radius="var(--goods-rounded-big)" width="180rpx" height="180rpx" :src="img(item.sku_image)" model="aspectFill">
+									<template #error>
+										<image class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+								<view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] py-[6rpx]">
+									<view class="line-normal">
+										<view class="truncate text-[#303133] text-[28rpx] leading-[32rpx]">
+											{{ item.goods.goods_name }}
+										</view>
+										<view class="mt-[14rpx] flex" v-if="item.sku_name">
+											<text class="truncate text-[24rpx] text-[var(--text-color-light9)] leading-[28rpx]">{{ item.sku_name }}</text>
+										</view>
+									</view>
+									<view v-if="item.manjian_info && Object.keys(item.manjian_info).length" class="flex items-center mt-[10rpx] mb-[auto]" @click.stop="manjianOpenFn(item.manjian_info)">
+										<view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[20rpx] flex items-center justify-center w-[88rpx] h-[36rpx] mr-[6rpx]">满减送</view>
+										<text class="text-[22rpx] text-[#999]">{{item.manjian_info.manjian_name}}</text>
+									</view>
+									<view class="mb-auto" :class="{'mt-[6rpx]': !item.sku_name}" v-if="item.not_support_delivery">
+										<u-alert type="error" description="该商品不支持当前所选配送方式" class="leading-[30rpx] !inline-block" fontSize="11"></u-alert>
+									</view>
+									<view class="flex justify-between items-baseline">
+										<view class="text-[var(--price-text-color)] flex items-baseline  price-font">
+											<text class="text-[24rpx] font-500 mr-[4rpx]">￥</text>
+											<text class="text-[40rpx] font-500">{{ parseFloat(item.price).toFixed(2).split('.')[0] }}</text>
+											<text class="text-[24rpx] font-500">.{{ parseFloat(item.price).toFixed(2).split('.')[1] }}</text>
+										</view>
+										<view class="font-400 text-[28rpx] text-[#303133]">
+											<text>x</text>
+											<text>{{ item.num }}</text>
+										</view>
+									</view>
+								</view>
+							</view>
+							<view class="flex items-center mt-[8rpx]" :class="{'pb-[40rpx]': (index + 1) != Object.keys(orderData.goods_data).length}" v-if="item.is_newcomer && item.newcomer_price != item.price && item.num>1">
+								<image class="h-[24rpx] w-[56rpx]" :src="img('addon/shop/newcomer.png')" mode="heightFix" />
+								<view class="text-[24rpx] text-[#FFB000] leading-[34rpx] ml-[8rpx]"
+							>第1{{item.goods.unit}}，￥{{parseFloat(item.newcomer_price).toFixed(2)}}/{{item.goods.unit}}；第{{item.num>2?'2~'+item.num:'2'}}{{item.goods.unit}}，￥{{parseFloat(item.price).toFixed(2)}}/{{item.goods.unit}}</view>
+							</view>
+						</view>
+						<!-- 赠品 -->
+						<view class="pt-[20rpx] bg-[#f9f9f9] mt-[24rpx] mx-[var(--pad-sidebar-m)] rounded-[30rpx]" v-if="orderData.gift_goods && Object.keys(orderData.gift_goods).length">
+							<view v-for="(item, key, index) in orderData.gift_goods" :key="index" class="flex px-[var(--pad-sidebar-m)] pb-[20rpx]">
+								<u--image radius="var(--goods-rounded-big)" width="120rpx" height="120rpx" :src="img(item.sku_image)" model="aspectFill">
+									<template #error>
+										<image class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+									</template>
+								</u--image>
+								<view class="ml-[16rpx] py-[8rpx] flex flex-1 flex-col justify-between">
+									<view class="flex items-center">
+										<view class="bg-[var(--primary-color-light)] whitespace-nowrap text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center w-[64rpx] h-[34rpx] mr-[6rpx]">赠品</view>
+										<view class="text-[26rpx] max-w-[400rpx] truncate leading-[40rpx] text-[#333]">{{ item.goods.goods_name }}</view>
+									</view>
+									<view class="flex items-center">
+										<view v-if="item.sku_name" class="text-[22rpx] text-[var(--text-color-light9)] truncate max-w-[400rpx] leading-[28rpx]">
+											{{ item.sku_name }}
+										</view>
+										<view class="ml-[auto] font-400 text-[26rpx] text-[#303133]">
+											<text>x</text>
+											<text>{{ item.num }}</text>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+                    <!-- 买家留言 -->
+                    <view class="bg-white flex items-center leading-[30rpx] px-[var(--pad-sidebar-m)]">
+                        <view class="text-[28rpx] w-[150rpx] text-[#303133]">买家留言</view>
+                        <view class="flex-1 text-[#303133]">
+                            <input type="text" v-model="createData.member_remark" class="text-right text-[#333] text-[28rpx]" maxlength="50" placeholder="请输入留言信息给卖家" placeholder-class="text-[var(--text-color-light9)] text-[28rpx]">
+                        </view>
+                    </view>
+                    <!-- 发票 -->
+                    <view v-if="invoiceRef && invoiceRef.invoiceOpen" class="flex items-center text-[#303133] leading-[30rpx] mt-[30rpx] px-[var(--pad-sidebar-m)]" @click="invoiceRef.open()">
+                        <view class="text-[28rpx] w-[150rpx] text-[#303133]">发票信息</view>
+                        <view class="flex-1 w-0 text-right truncate">
+                            <text class="text-[28rpx] text-[#333]">{{ createData.invoice.header_name || '不需要发票' }}</text>
+                        </view>
+                        <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                    </view>
+
+                </view>
+
+                <view class="mb-[var(--top-m)] card-template" v-if="couponRef && couponList.length">
+                    <!-- 优惠券 -->
+                    <view class="flex items-center h-[40rpx] leading-[40rpx]" @click="couponRef.open(createData.discount.coupon_id)" v-if="couponList.length">
+                        <view class="text-[28rpx] w-[150rpx] text-[#303133] flex-shrink-0">优惠券</view>
+                        <view class="flex-1 flex justify-end truncate">
+                            <text v-if="orderData.discount && orderData.discount.coupon" class="text-[var(--primary-color)] text-[28rpx] truncate ">
+                                {{ orderData.discount.coupon.title }}
+                            </text>
+                            <text class="text-[28rpx] text-gray-subtitle" v-else>请选择优惠券</text>
+                        </view>
+                        <text class="nc-iconfont nc-icon-youV6xx -mb-[2rpx] text-[26rpx] text-[var(--text-color-light9)]"></text>
+                    </view>
+                </view>
+
+                <view class="card-template">
+                    <view class="title">价格明细</view>
+                    <view class="card-template-item">
+                        <view class="text-[28rpx] w-[150rpx] leading-[30rpx] text-[#303133]">商品金额</view>
+                        <view class="flex-1 w-0 text-right  price-font text-[#333] text-[32rpx]">
+							￥{{ parseFloat(orderData.basic.goods_money).toFixed(2) }}
+                        </view>
+                    </view>
+                    <view class="card-template-item" v-if="parseFloat(orderData.basic.delivery_money)">
+                        <view class="text-[28rpx] w-[150rpx] leading-[30rpx] text-[#303133]">配送费用</view>
+                        <view class="flex-1 w-0 text-right price-font text-[#333] text-[32rpx]">
+                            ￥{{ parseFloat(orderData.basic.delivery_money).toFixed(2) }}
+                        </view>
+                    </view>
+                    <!-- <view class="card-template-item" v-if="orderData.basic.discount_money">
+                        <view class="text-[28rpx] w-[150rpx] leading-[30rpx] text-[#303133]">优惠金额</view>
+                        <view class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
+                            -￥{{parseFloat(orderData.basic.discount_money)}}
+                        </view>
+                    </view> -->
+					<view class="card-template-item" v-if="parseFloat(orderData.basic.coupon_money)">
+					    <view class="text-[28rpx] w-[170rpx] leading-[30rpx] text-[#303133]">优惠券优惠</view>
+					    <view class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
+					        -￥{{parseFloat(orderData.basic.coupon_money).toFixed(2)}}
+					    </view>
+					</view>
+					<view class="card-template-item" v-if="parseFloat(orderData.basic.manjian_discount_money)">
+					    <view class="text-[28rpx] w-[170rpx] leading-[30rpx] text-[#303133]">满减优惠</view>
+					    <view class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
+					        -￥{{parseFloat(orderData.basic.manjian_discount_money).toFixed(2)}}
+					    </view>
+					</view>
+                </view>
+            </view>
+            <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" zIndex="10">
+                <view class="flex-1 flex items-center justify-between pl-[30rpx] pr-[20rpx]">
+                    <view class="flex items-baseline">
+                        <text class="text-[26rpx] text-[#333] leading-[32rpx]">合计：</text>
+						<view class="inline-block">
+							<text class="text-[26rpx] font-500 text-[var(--price-text-color)] price-font leading-[30rpx]">￥</text>
+							<text class="text-[44rpx]  font-500  text-[var(--price-text-color)] price-font leading-[46rpx]">{{ parseFloat(orderData.basic.order_money).toFixed(2).split('.')[0] }}</text>
+							<text class="text-[26rpx]  font-500  text-[var(--price-text-color)] price-font leading-[46rpx]">.{{ parseFloat(orderData.basic.order_money).toFixed(2).split('.')[1] }}</text>
+						</view>
+                    </view>
+                    <button class="w-[196rpx]  h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0  rounded-full  primary-btn-bg remove-border" hover-class="none" @click="create">提交订单</button>
+                </view>
+            </u-tabbar>
+
+            <!-- 选择优惠券 -->
+            <select-coupon :order-key="createData.order_key" ref="couponRef" @confirm="confirmSelectCoupon" />
+        </view>
+		
+		<!-- 选择自提点 -->
+		<select-store ref="storeRef" @confirm="confirmSelectStore" />
+		<!-- 发票 -->
+		<invoice ref="invoiceRef" @confirm="confirmInvoice" />
+		<!-- 地址 -->
+		<address-list ref="addressRef" @confirm="confirmAddress" />
+		<!-- 满减 -->
+		<ns-goods-manjian ref="manjianShowRef"></ns-goods-manjian>
+		<pay ref="payRef" @close="payClose" />
+		
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { orderCreateCalculate, orderCreate } from '@/addon/shop/api/order'
+import { redirect, img, moneyFormat, mobileHide } from '@/utils/common'
+import selectCoupon from './components/select-coupon/select-coupon'
+import selectStore from './components/select-store/select-store'
+import addressList from './components/address-list/address-list'
+import invoice from './components/invoice/invoice'
+import nsGoodsManjian from '@/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue';
+import { useSubscribeMessage } from '@/hooks/useSubscribeMessage'
+import { onShow } from '@dcloudio/uni-app'
+import { cloneDeep } from 'lodash-es'
+
+const createData: any = ref({
+    order_key: '',
+    member_remark: '',
+    discount: {},
+    invoice: {},
+    delivery: {
+        delivery_type: ''
+    },
+	extend_data:{} // 扩展数据，目前礼品卡用到
+})
+const manjianShowRef: any = ref(null); //满减送
+
+const orderData: any = ref(null)
+const couponRef = ref()
+const storeRef = ref()
+const payRef = ref()
+const addressRef = ref()
+const invoiceRef = ref()
+const createLoading = ref(false)
+const activeIndex = ref(0)//配送方式激活
+const delivery_type_list = ref([])
+uni.getStorageSync('orderCreateData') && Object.assign(createData.value, uni.getStorageSync('orderCreateData'))
+
+onShow(() => {
+	nextTick(()=>{
+		if(storeRef.value){
+			storeRef.value.getData((data:any)=>{
+				if(data.length){
+					createData.value.delivery.take_store_id = ((data[0] && data[0].store_id) ? data[0].store_id: 0)
+				}
+			});
+		}
+	})
+})
+
+// 选择地址之后跳转回来
+const selectAddress = uni.getStorageSync('selectAddressCallback')
+if (selectAddress) {
+    createData.value.order_key = ''
+    createData.value.delivery.delivery_type = selectAddress.delivery
+    createData.value.delivery.take_address_id = selectAddress.address_id
+    uni.removeStorage({ key: 'selectAddressCallback' })
+}
+
+// 切换配送方式
+const switchDeliveryType = (type: string, index: number) => {
+    if (createData.value.delivery.delivery_type != type) {
+        activeIndex.value = index
+        createData.value.order_key = ''
+        createData.value.delivery.delivery_type = type
+        createData.value.delivery.take_address_id = 0
+        calculate()
+    }
+}
+
+// 满减
+const manjianOpenFn = (data:any) =>{
+	let obj = {};
+	obj.condition_type = cloneDeep(data).condition_type;
+	obj.rule_json = [cloneDeep(data).rule];
+	obj.name = cloneDeep(data).manjian_name;
+	manjianShowRef.value.open(obj);
+}
+
+/**
+ * 订单计算
+ */
+const calculate = () => {
+    orderCreateCalculate(createData.value).then(({ data }) => {
+        orderData.value = cloneDeep(data);
+		
+		orderData.value.goods = []; //购买商品
+		if(orderData.value.goods_data && Object.values(orderData.value.goods_data).length){
+			Object.values(orderData.value.goods_data).forEach((item,index)=>{
+				orderData.value.goods.push(item);
+			})
+		}
+
+        createData.value.order_key = data.order_key
+        if (orderData.value.delivery.delivery_type_list) {
+            delivery_type_list.value = Object.values(orderData.value.delivery.delivery_type_list)
+        }
+		if(orderData.value.discount && orderData.value.discount.manjian){
+			orderData.value.manjian = orderData.value.discount.manjian
+		}
+
+        if (selectAddress) activeIndex.value = delivery_type_list.value.findIndex(el => el.key === orderData.value.delivery.delivery_type)
+        !createData.value.delivery.delivery_type && data.delivery.delivery_type && (createData.value.delivery.delivery_type = data.delivery.delivery_type)
+
+    }).catch()
+}
+calculate()
+
+// 改变配送方式
+watch(
+	() => delivery_type_list.value.length,
+	(newValue, oldValue) => {
+		if(delivery_type_list.value.length && uni.getStorageSync('distributionType')){
+			delivery_type_list.value.forEach((item: any,index)=>{
+				if(item.name == uni.getStorageSync('distributionType')){
+					activeIndex.value = index;
+					switchDeliveryType(item.key, index)
+				}
+			})
+			uni.removeStorage({ key: 'distributionType' })
+		}
+	}
+)
+
+let orderId = 0
+/**
+ * 订单创建
+ */
+const create = () => {
+    if (!verify() || createLoading.value) return
+    createLoading.value = true
+
+    useSubscribeMessage().request('shop_order_pay,shop_order_delivery')
+
+    orderCreate(createData.value).then(({ data }) => {
+        orderId = data.order_id
+        if (orderData.value.basic.order_money == 0) {
+            redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: orderId }, mode: 'redirectTo' })
+        } else {
+            payRef.value?.open(data.trade_type, data.order_id, `/addon/shop/pages/order/detail?order_id=${ data.order_id }`)
+        }
+    }).catch(() => {
+        createLoading.value = false
+    })
+}
+
+/**
+ * 下单校验
+ */
+const verify = () => {
+    const data = createData.value
+    let verify = true
+
+    if (orderData.value.basic.has_goods_types.includes('real')) {
+        if (['express', 'local_delivery'].includes(data.delivery.delivery_type) && !orderData.value.delivery.take_address) {
+            uni.showToast({ title: '请选择收货地址', icon: 'none' })
+            return false
+        }
+
+        if (data.delivery.delivery_type == 'store' && !data.delivery.take_store_id) {
+            uni.showToast({ title: '请选择自提点', icon: 'none' })
+            return false
+        }
+    }
+
+    return verify
+}
+
+/**
+ * 支付弹窗关闭
+ */
+const payClose = () => {
+    redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: orderId }, mode: 'redirectTo' })
+}
+
+/**
+ * 选择地址
+ */
+const toSelectAddress = () => {
+	let data: any = {};
+	data.delivery = createData.value.delivery.delivery_type;
+	data.type = createData.value.delivery.delivery_type == 'local_delivery' ? 'location_address' : 'address';
+	data.id = orderData.value.delivery.take_address.id;
+	addressRef.value.open(data);
+}
+
+const couponList = computed(() => {
+    return couponRef.value?.couponList || []
+})
+
+/**
+ * 选择优惠券
+ */
+const confirmSelectCoupon = (coupon: any) => {
+    createData.value.discount.coupon_id = coupon ? coupon.id : 0
+    calculate()
+}
+
+/**
+ * 选择自提点
+ */
+const confirmSelectStore = (store: any) => {
+    createData.value.delivery.take_store_id = ((store && store.store_id) ? store.store_id: 0)
+    calculate()
+}
+
+const confirmInvoice = (invoice: object) => {
+    createData.value.invoice = invoice
+}
+
+const confirmAddress = (data:any) => {
+	createData.value.order_key = ''
+	createData.value.delivery.delivery_type = data.delivery
+	createData.value.delivery.take_address_id = data.address_id
+	calculate();
+}
+</script>
+
+<style lang="scss" scoped>
+.head-tab{
+	.head-tab-item{
+		.tab-image{
+            left: 50%;
+			transform: translateX(-50%);
+		}
+		&:nth-child(1).active{
+			view{
+				padding-right: 40rpx;
+			}
+		}
+		&:nth-child(2){
+			.tab-image{
+				width: 312rpx;
+			}
+		}
+		&:nth-child(3).active{
+			view{
+				padding-left: 30rpx;
+			}
+		}
+		&.active{
+			view{
+                font-weight: bold;
+				color: var(--primary-color);
+			}
+		}
+        .tab-img{
+            left: 50%;
+			transform: translateX(-50%);
+        }
+
+	}
+}
+
+:deep(.u-alert) {
+    padding: 6rpx 16rpx !important;
+    display: inline-block !important;
+}
+.alert-wrap{
+    display: inline-block !important;
+    :deep(.u-fade-enter-active){
+        display: inline-block !important;
+    }
+}
+
+.text-ellipsis {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+.line-normal{
+    line-height: normal;
+}
+.bg-color{
+    background: linear-gradient( 94deg, var(--primary-help-color) 0%, var(--primary-color) 69%),var(--primary-color) ;
+}
+.payment-bottom{
+	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+</style>
diff --git a/src/addon/shop/pages/point/components/address-list/address-list.vue b/src/addon/shop/pages/point/components/address-list/address-list.vue
new file mode 100644
index 0000000..3d7a1af
--- /dev/null
+++ b/src/addon/shop/pages/point/components/address-list/address-list.vue
@@ -0,0 +1,100 @@
+<template>
+    <u-popup :show="show" @close="show = false" mode="bottom" :round="10">
+        <view @touchmove.prevent.stop class="popup-common">
+			<view class="title">{{t('selectAddress')}}</view>
+			<scroll-view scroll-y="true" class="h-[50vh]">
+				<view v-for="(item,index) in addressList" :key="item.id" class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]" :class="{'mb-[var(--top-m)]': addressList.length-1 != index, 'text-[var(--primary-color)] !border-[var(--primary-color)]': item.id == currAddressId}" @click="selectAddress(index)">
+					<text class="nc-iconfont nc-icon-dingweiV6xx-1 text-[36rpx]"></text>
+					<view class="flex flex-col mx-[20rpx] w-[480rpx]">
+						<view class="flex items-center truncate leading-[1.5]">
+							<text class="mr-[8rpx] text-[30rpx] truncate max-w-[300rpx]">{{item.name}}</text>
+							<text class="text-[30rpx]">{{item.mobile}}</text>
+						</view>
+						<view class="truncate text-[26rpx] leading-[1.5] mt-[12rpx]">{{item.full_address}}</view>
+					</view>
+					<text class="nc-iconfont nc-icon-xiugaiV6xx text-[32rpx] ml-auto" @click="editAddress(item)"></text>
+				</view>
+				<view v-if="!addressList || addressList && !addressList.length" class="text-[var(--text-color-light6)] text-[28rpx] text-center">{{t('emptyAddress')}}</view>
+			</scroll-view>
+			
+			<view class="btn-wrap"> 
+                <button class="primary-btn-bg btn" @click="addAddress">{{t('addAddress')}}</button>
+			</view>
+		</view>
+    </u-popup>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { getAddressList } from '@/app/api/member'
+    import { t } from '@/locale'
+    import { redirect } from '@/utils/common'
+
+    const show = ref(false)
+	const loading = ref(false)
+	const currAddressId = ref('') // 选中的索引
+	const propData: any = ref({})
+	const addressList = ref([])
+	
+	const emits = defineEmits(['confirm'])
+	
+    const open = (data: Object) => {
+        show.value = true;
+		propData.value = data;
+		currAddressId.value = data.id;
+    }
+
+	getAddressList({}).then(({ data }) => {
+		addressList.value = data;
+	    loading.value = false
+	})
+	
+	const selectAddress = (index: number) => {
+		let data: any = addressList.value[index];
+		if(propData.value.delivery == 'local_delivery' && !data.lat && !data.lng){
+			// 待支付订单-同城配送，选择的地址没有经纬度的情况，会直接跳转到地图界面进行选择
+			// 参数二，表示是否直接跳转到地图界面, 1跳转到地图界面，2表示不跳
+			editAddress(data,1);
+		}else{
+			let obj:any = {}
+			obj.address_id = addressList.value[index].id
+			obj.delivery = propData.value.delivery
+			emits('confirm', obj)
+		}
+		show.value = false;
+	}
+	
+	const editAddress = (data: Object, isSelectMap: number = 2)=>{
+		uni.setStorage({
+		    key: 'selectAddressCallback',
+		    data: {
+		        back: '/addon/shop/pages/point/payment',
+		        delivery: propData.value.delivery
+		    },
+		    success() {
+		        redirect({ url: '/app/pages/member/address_edit', param: { id: data.id, source: 'shop_order_payment', isSelectMap } })
+		    }
+		})
+	}
+
+	const addAddress = () =>{
+		uni.setStorage({
+		    key: 'selectAddressCallback',
+		    data: {
+		        back: '/addon/shop/pages/point/payment',
+		        delivery: propData.value.delivery
+		    },
+		    success() {
+		        redirect({ url: '/app/pages/member/address_edit', param: { source: 'shop_order_payment' } })
+		    }
+		})
+	}
+	
+    defineExpose({
+        open
+    })
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/addon/shop/pages/point/components/goods-sku.vue b/src/addon/shop/pages/point/components/goods-sku.vue
new file mode 100644
index 0000000..6f55539
--- /dev/null
+++ b/src/addon/shop/pages/point/components/goods-sku.vue
@@ -0,0 +1,282 @@
+<template>
+	<view @touchmove.prevent.stop>
+		<u-popup class="popup-type" :show="goodsSkuPop" @close="closeFn" mode="bottom">
+			<view class="py-[32rpx] relative" v-if="goodsDetail.detail" @touchmove.prevent.stop>
+				<view class="flex px-[32rpx] mb-[40rpx]">
+					<view class="w-[180rpx] h-[180rpx]">
+						<u--image width="180rpx" height="180rpx" :radius="'var(--goods-rounded-big)'" :src="img(goodsDetail.detail.sku_image)" @click="imgListPreview(goodsDetail.detail.sku_image)" model="aspectFill">
+							<template #error>
+								<image class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+							</template>
+						</u--image>
+					</view>
+					<view class="flex flex-1 flex-col justify-between ml-[20rpx] py-[10rpx]">
+						<view class="w-[100%]">
+							<view class="text-[var(--price-text-color)] flex items-baseline">
+								<text class="price-font" v-if="goodsDetail.point">
+									<text class="text-[44rpx]">{{goodsDetail.point}}</text>
+									<text class="text-[38rpx]">{{t('point')}}</text>
+								</text>
+								<text class="text-[38rpx]" v-if="goodsDetail.point&&parseFloat(goodsDetail.price)">+</text>
+								<template v-if="goodsDetail.point&&parseFloat(goodsDetail.price)">
+									<text class="text-[44rpx] price-font">{{ parseFloat(goodsDetail.price).toFixed(2) }}</text>
+									<text class="text-[38rpx] price-font">元</text>
+								</template>
+								<template v-if="!goodsDetail.point&&!parseFloat(goodsDetail.price)">
+									<text class="text-[26rpx] price-font">￥</text>
+									<text class="text-[44rpx] price-font">{{ parseFloat(goodsDetail.price).toFixed(2).split('.')[0] }}</text>
+									<text class="text-[26rpx] mr-[6rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
+								</template>
+								
+							</view>
+							<view class="text-[26rpx] leading-[32rpx] text-[var(--text-color-light6)] mt-[10rpx]">库存{{goodsDetail.detail.stock}}{{ goodsDetail.goods.unit }}</view>
+						</view>
+						<view class="text-[26rpx] leading-[30rpx] text-[var(--text-color-light6)] w-[100%] max-h-[60rpx] multi-hidden" v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length">已选规格：{{goodsDetail.detail.sku_spec_format}}</view>
+					</view>
+				</view>
+				<scroll-view class="h-[500rpx] px-[32rpx] box-border mb-[60rpx]" scroll-y="true">
+					<view :class="{'mt-[20rpx]': 0 != index }" v-for="(item,index) in goodsDetail.goodsSpec" :key="index">
+						<view class="text-[28rpx] leading-[36rpx] mb-[24rpx]">{{item.spec_name}}</view>
+						<view class="flex flex-wrap">
+							<view class="box-border bg-[var(--temp-bg)] text-[24rpx] px-[44rpx] text-center h-[56rpx] flex-center mr-[20rpx] mb-[20rpx] border-1 border-solid rounded-[50rpx] border-[var(--temp-bg)]"
+							 :class="{'!border-[var(--primary-color)] text-[var(--primary-color)] !bg-[var(--primary-color-light)]': subItem.selected}"
+							v-for="(subItem,subIndex) in item.values" :key="subIndex"
+							@click="change(subItem, index)">
+								{{subItem.name}}
+							</view>
+						</view>
+					</view>
+					<view class="flex justify-between items-center mt-[8rpx]">
+						<view class="text-[28rpx]">购买数量</view>
+						<text v-if="goodsDetail.detail.limit_num > 0" class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">(限购{{ goodsDetail.detail.limit_num }}{{ goodsDetail.goods.unit }})</text>
+						<u-number-box :min="1" :max="parseInt(goodsDetail.detail.limit_num)<goodsDetail.stock?parseInt(goodsDetail.detail.limit_num):goodsDetail.stock" integer :step="1" input-width="68rpx" v-model="buyNum" input-height="52rpx">
+							<template #minus>
+								<text class="text-[30rpx] nc-iconfont nc-icon-jianV6xx font-500" :class="{ '!text-[var(--text-color-light9)]': buyNum <= 1 }"></text>
+							</template>
+							<template #input>
+								<input  class="text-[#303133] text-[28rpx] mx-[10rpx] w-[80rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]" type="number" @input="goodsSkuInputFn" @blur="goodsSkuBlurFn" v-model="buyNum"  />
+							</template>
+							<template #plus>
+								<text class="text-[30rpx] nc-iconfont nc-icon-jiahaoV6xx font-500" :class="{ '!text-[var(--text-color-light9)]': buyNum >= goodsDetail.stock || buyNum ==parseInt(goodsDetail.detail.limit_num)}"></text>
+							</template>
+						</u-number-box>
+					</view>
+				</scroll-view>
+				<view class="px-[20rpx]">
+					<!-- #ifdef H5 -->
+					<button v-if="goodsDetail.detail.stock > 0" hover-class="none" class="!h-[80rpx] primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx] font-500" type="primary" @click="confirm">确定</button>
+					<!-- #endif -->
+
+					<!-- #ifdef MP-WEIXIN -->
+					<template v-if="goodsDetail.detail.stock > 0">
+						<button v-if="isBindMobile && userInfo && !userInfo.mobile" hover-class="none" class="!h-[80rpx] primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx] font-500" type="primary" open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">确定</button>
+						<button v-else hover-class="none" class="!h-[80rpx] primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx] font-500" type="primary" @click="confirm">确定</button>
+					</template>
+					<!-- #endif -->
+
+					<button hover-class="none" v-else class="!h-[80rpx] leading-[80rpx] text-[26rpx] text-[#fff] bg-[#ccc] rounded-[50rpx] font-500">已售罄</button>
+				</view>
+			</view>
+		</u-popup>
+		<!-- 强制绑定手机号 -->
+		<bind-mobile ref="bindMobileRef" /> 
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, reactive, computed } from 'vue';
+	import { img, redirect, getToken } from '@/utils/common'
+	import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
+	import { useLogin } from '@/hooks/useLogin'
+	import useMemberStore from '@/stores/member'
+	import { t } from '@/locale';
+	import { cloneDeep } from 'lodash-es'
+
+	const props = defineProps(['goodsDetail']);
+	const goodsSkuPop = ref(false);
+	const callback:any = ref(null);
+	const currSpec: any = ref({
+		skuId: "",
+		name: []
+	})
+	const openType = ref("");
+	const buyNum = ref(1)
+	
+	// 商品价格
+	const goodsPrice = computed(() => {
+        let price = "0.00";
+        if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
+            // 会员价
+            price = goodsDetail.value.member_price ? goodsDetail.value.member_price : goodsDetail.value.price;
+        } else {
+            price = goodsDetail.value.price
+        }
+        return price;
+    })
+	
+	const goodsSkuInputFn = ()=>{
+		setTimeout(() => {
+			if(!buyNum.value || buyNum.value <= 0 ){
+				buyNum.value =  1;
+			}
+			if(buyNum.value >= Number(goodsDetail.value.detail.limit_num)){
+				buyNum.value = goodsDetail.value.detail.limit_num;
+			}
+		},0)
+	}
+	
+	const goodsSkuBlurFn = ()=>{
+		setTimeout(() => {
+			if(!buyNum.value || buyNum.value <= 0 ){
+				buyNum.value = 1;
+			}
+			if(buyNum.value >=  Number(goodsDetail.value.detail.limit_num)){
+				buyNum.value = goodsDetail.value.detail.limit_num;
+			}
+		},0)
+	}
+
+	// 会员信息
+	const memberStore = useMemberStore()
+	const userInfo = computed(() => memberStore.info)
+
+	const open = (type="",fn = "")=>{
+		openType.value = type;
+		goodsSkuPop.value = true;
+		callback.value = fn;
+	}
+
+	const closeFn = ()=>{
+		goodsSkuPop.value = false
+	}
+
+	const goodsDetail = computed(() => {
+		let data = cloneDeep(props.goodsDetail);
+
+		// 重组数据结构
+		if(Object.keys(data).length){
+
+			if(!Object.keys(currSpec.value.name).length) currSpec.value.name = data.sku_spec_format.split(",");
+
+			data.goodsSpec.forEach((item: any,index: any)=>{
+				let specName = item.spec_values.split(",");
+				item.values = [];
+				specName.forEach((specItem: any, specIndex: any)=>{
+					item.values[specIndex] = {};
+					item.values[specIndex].name = specItem;
+					item.values[specIndex].selected = false;
+					item.values[specIndex].disabled = false;
+
+					// 选中规格
+					currSpec.value.name.forEach((currSpecItem, currSpecIndex)=>{
+						if(currSpecIndex == index && currSpecItem == specItem){
+							item.values[specIndex].selected = true;
+						}
+					})
+				})
+			})
+			getSkuId();
+
+			// 当前详情内容
+			if(data.skuList && Object.keys(data.skuList).length){
+				data.skuList.forEach((idItem: any, idIndex: any)=>{
+					if(idItem.sku_id == currSpec.value.skuId){
+						data.detail = idItem;
+					}
+				})
+			}
+		}
+		return data;
+	})
+
+	const change = (data: any, index: any)=>{
+		currSpec.value.name[index] = data.name;
+		buyNum.value = 1
+		getSkuId();
+	}
+
+	const emits = defineEmits(['change'])
+	const getSkuId = ()=>{
+		props.goodsDetail.skuList.forEach((skuItem: any, skuIndex: any)=>{
+			if(skuItem.sku_spec_format == currSpec.value.name.toString()){
+				currSpec.value.skuId = skuItem.sku_id
+				emits('change',skuItem.sku_id)
+			}
+		})
+	}
+
+	//强制绑定手机号
+	const bindMobileRef: any = ref(null)
+	const isBindMobile = ref(uni.getStorageSync('isbindmobile'))
+
+	const confirm = ()=> {
+        // 检测是否登录
+        if (!userInfo.value) {
+            useLogin().setLoginBack({url: '/addon/shop/pages/point/detail', param: {id: goodsDetail.value.exchange_id}})
+            return false
+        }
+
+		// #ifdef H5
+		// 绑定手机号
+		if(uni.getStorageSync('isbindmobile')){
+			bindMobileRef.value.open()
+			return false
+		}
+		// #endif
+
+        // 立即购买
+        var data = {
+            sku_id: goodsDetail.value.sku_id,
+            num: buyNum.value
+        };
+
+        uni.setStorage({
+            key: 'orderCreateData',
+            data: {
+                sku_data: [
+                    data
+                ]
+            },
+            success: () => {
+                redirect({url: '/addon/shop/pages/point/payment'})
+            }
+        });
+
+        closeFn();
+    }
+
+	//预览图片
+	const imgListPreview = (item: any) => {
+		if (item === '') return false
+		var urlList = []
+		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+		uni.previewImage({
+			indicator: "number",
+			loop: true,
+			urls: urlList
+		})
+	}
+
+	defineExpose({
+		open
+	})
+</script>
+
+<style lang="scss" scoped>
+.popup-type {
+	:deep(.u-popup__content) {
+		border-top-left-radius: 16rpx;
+		border-top-right-radius: 16rpx;
+		overflow: hidden;
+	}
+}
+// 防止覆盖住图片放大
+.u-popup :deep(.u-transition){
+	z-index: 999 !important;
+}
+::v-deep .u-number-box .u-number-box__slot{
+	display: flex;
+	align-items: center;
+}
+</style>
+
diff --git a/src/addon/shop/pages/point/detail.vue b/src/addon/shop/pages/point/detail.vue
new file mode 100644
index 0000000..66e0a80
--- /dev/null
+++ b/src/addon/shop/pages/point/detail.vue
@@ -0,0 +1,630 @@
+<template>
+	<view :style="themeColor()">
+		<scroll-view scroll-y="true" class="h-[100vh] w-full">
+		<view class="bg-[var(--page-bg-color)] min-h-[100vh] relative" v-if="Object.keys(goodsDetail).length">
+			<!-- 自定义头部 -->
+			<view class="flex items-center fixed left-0 right-0 z-10 bg-transparent detail-head" :class="{'!bg-[#fff]' :detailHeadBgChange}" :style="navbarInnerStyle">
+				<text class="nc-iconfont nc-icon-zuoV6xx" :style="navbarInnerArrowStyle" @click="backToPrevious()"></text>
+				<view class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] bg-[rgba(255,255,255,.4)] rounded-full border-[2rpx] border-solid border-transparent box-border nc-iconfont nc-icon-fenxiangV6xx font-bold text-[#303133] text-[36rpx]" :class="{'border-[#d8d8d8]': detailHeadBgChange}"  @click="openShareFn"></view>
+			</view>
+
+			<view class="swiper-box">
+				<u-swiper :list="goodsDetail.goods.goods_image" :indicator="goodsDetail.goods.goods_image.length" :indicatorStyle="{'bottom': '68rpx',}" :autoplay="true" height="100vw" @click="swiperClick"></u-swiper>
+			</view>
+			<view class="rounded-t-[40rpx] -mt-[40rpx] relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]" :style="{ background: 'url(' + img('addon/shop/detail/discount_price_bg.png') + ') no-repeat'}">
+				<view class="flex items-baseline text-[#fff]">
+					<view class="flex items-center">
+						<view class="inline-block price-font" v-if="goodsDetail.point">
+							<text class="text-[44rpx]">{{goodsDetail.point}}</text>
+							<text class="text-[38rpx]">{{t('point')}}</text>
+						</view>
+						<text class="text-[38rpx]" v-if="goodsDetail.point&&parseFloat(goodsDetail.price)">+</text>
+						<view class="inline-block price-font" v-if="parseFloat(goodsDetail.price)">
+							<text class="text-[44rpx]">{{parseFloat(goodsDetail.price).toFixed(2)}}</text>
+							<text class="text-[38rpx]">{{t('priceUnit')}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="bg-[var(--page-bg-color)] overflow-hidden rounded-[40rpx] -mt-[28rpx] relative">
+				<view class="datail-title relative px-[30rpx] pt-[40rpx]">
+					<view class="text-[#333] font-medium text-[30rpx] multi-hidden leading-[40rpx]">
+						<view class="brand-tag middle" v-if="goodsDetail.goods.goods_brand">
+							{{goodsDetail.goods.goods_brand.brand_name}}
+						</view>
+						{{ goodsDetail.goods.goods_name }}
+					</view>
+					<view class="flex justify-between items-start mt-[24rpx]  ">
+						<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]" v-if="goodsDetail.market_price && parseFloat(goodsDetail.market_price)">
+							<text class="whitespace-nowrap mr-[4rpx]">划线价:</text>
+							<text class="line-through">￥{{ goodsDetail.market_price }}</text>
+						</view>
+						<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]" v-if="goodsDetail.stock && parseFloat(goodsDetail.stock)">
+							<text class="whitespace-nowrap mr-[4rpx]">库存:</text>
+							<text class="">{{ goodsDetail.stock }}</text>
+							<text class="">{{ goodsDetail.goods.unit }}</text>
+						</view>
+						<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)] flex items-baseline">
+							<text class="whitespace-nowrap mr-[4rpx]">销量:</text>
+							<text class="mx-[2rpx]">{{ goodsDetail.goods.sale_num }}</text>
+							<text class="">{{ goodsDetail.goods.unit }}</text>
+						</view>
+					</view>
+					<view class="flex flex-wrap mt-[16rpx]" v-if="goodsDetail.label_info && goodsDetail.label_info.length">
+						<block v-for="item in goodsDetail.label_info" :key="item.label_id">
+							<image class="img-tag middle" v-if="item.style_type == 'icon' && item.icon" :src="img(item.icon)" mode="heightFix" @error="diyGoods.error(item,'icon')"></image>
+							<view class="base-tag middle" v-else-if="item.style_type == 'diy' || !item.icon" :style="diyGoods.baseTagStyle(item)">
+								{{item.label_name}}
+							</view>
+						</block>
+					</view>
+				</view>
+				<view class="mt-[24rpx] sidebar-margin card-template" v-if="isGoodsPropertyTemp">
+					<view @click="servicesDataShow = !servicesDataShow" v-if="goodsDetail.service && goodsDetail.service.length" class="card-template-item">
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">服务</text>
+						<view class="text-[#343434] text-[26rpx] leading-[30rpx] font-400 truncate ml-auto">
+							{{ goodsDetail.service[0].service_name }}
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+					<view @click="buyFn" v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length" class="card-template-item">
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0  mr-[20rpx]">已选</text>
+						<view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">
+							{{ goodsDetail.sku_spec_format }}
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+					<view class="card-template-item" @click="distributionDataOpen" v-if="goodsDetail.goods.goods_type == 'real' && goodsDetail.delivery_type_list && goodsDetail.delivery_type_list.length" >
+						<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">配送</text>
+						<view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
+							{{ goodsDetail.delivery_type_list[selectDeliveryType].name }}
+						</view>
+						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+					</view>
+
+				</view>
+
+				<view class="mt-[var(--top-m)] sidebar-margin card-template">
+					<view class="flex items-center justify-between min-h-[40rpx]" :class="{'mb-[30rpx]': evaluate && evaluate.list && evaluate.list.length}">
+						<text class="title !mb-[0]">宝贝评价({{ evaluate.count }})</text>
+						<view v-if="evaluate.count" class="h-[40rpx] flex items-center" @click="toLink(goodsDetail.goods_id)">
+							<text class="text-[24rpx] text-[var(--text-color-light9)]">查看全部</text>
+							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+						</view>
+						<text v-if="!evaluate.count" class="text-[24rpx] text-[var(--text-color-light6)]">暂无评价</text>
+					</view>
+					<view>
+						<view :class="{'pb-[34rpx]': index != (evaluate.list.length-1)}" v-for="(item, index) in evaluate.list" :key="index">
+							<view class="flex items-center w-full">
+								<u-avatar :default-url="img('static/resource/images/default_headimg.png')" :src="img(item.member_head)" :size="'50rpx'" leftIcon="none" />
+								<text class="ml-[10rpx] text-[28rpx] text-[#333]">{{ item.member_name }}</text>
+							</view>
+							<view class="flex justify-between w-full mt-[16rpx]">
+								<view class="flex-1 w-[540rpx] text-[26rpx] text-[#333] max-h-[72rpx] leading-[36rpx] multi-hidden mr-[50rpx]">{{ item.content }}</view>
+								<view class="w-[80rpx] shrink-0">
+									<u--image v-if="item.image_mid && item.image_mid.length" width="80rpx" height="80rpx" radius="16rpx" :src="img(item.image_mid[0])" model="aspectFill" @click="imgListPreview(item.images[0])">
+										<template #error>
+											<u-icon name="photo" color="#999" size="50"></u-icon>
+										</template>
+									</u--image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="my-[var(--top-m)] goods-sku sidebar-margin card-template" v-if="goodsDetail.goods && goodsDetail.goods.attr_format && Object.keys(goodsDetail.goods.attr_format).length">
+					<view class="title mb-[30rpx]">商品属性</view>
+					<view>
+						<block v-for="(item,index) in goodsDetail.goods.attr_format" :key="index">
+							<view v-if="index < 4 || isAttrFormatShow" class="card-template-item">
+								<view class="text-[26rpx] leading-[30rpx] w-[160rpx] font-400 shrink-0 text-[var(--text-color-light9)]">{{item.attr_value_name}}</view>
+								<view class="text-[#333] box-border value-wid text-[26rpx] leading-[30rpx] font-400 truncate pl-[20rpx]">{{Array.isArray(item.attr_child_value_name) ? item.attr_child_value_name.join(',') : item.attr_child_value_name }}</view>
+							</view>
+						</block>
+						<view v-if="goodsDetail.goods.attr_format.length > 4" class="flex-center" @click="isAttrFormatShow = !isAttrFormatShow">
+							<text class="text-[24rpx] mr-[10rpx]">{{isAttrFormatShow ? '展开' : '收起'}}</text>
+							<text class="nc-iconfont !text-[22rpx]" :class="{'nc-icon-xiaV6xx': isAttrFormatShow, 'nc-icon-shangV6xx-1': !isAttrFormatShow}"></text>
+						</view>
+					</view>
+				</view>
+
+				<view class="my-[var(--top-m)] sidebar-margin card-template px-[var(--pad-sidebar-m)]">
+					<view class="title">商品详情</view>
+					<view class="u-content">
+						<u-parse :content="goodsDetail.goods.goods_desc" :tagStyle="{img: 'vertical-align: top;',p:'overflow: hidden;word-break:break-word;' }"></u-parse>
+					</view>
+				</view>
+
+				<view class="tab-bar-placeholder"></view>
+				<view class="border-[0] border-t-[2rpx] border-solid border-[#f5f5f5] w-[100%] flex justify-between pl-[32rpx] pr-[4rpx] bg-[#fff] box-border fixed left-0 bottom-0 tab-bar z-1 items-center">
+					<view class="flex items-center">
+						<view class="flex flex-col justify-center items-center mr-[38rpx]" @click="redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })">
+							<view class="nc-iconfont nc-icon-shouyeV6xx text-[36rpx]"></view>
+							<text class="text-[20rpx] mt-[10rpx]">首页</text>
+						</view>
+						<!-- #ifdef H5 -->
+						<view class="flex flex-col justify-center items-center mr-[38rpx]" @click="openShareFn">
+							<view class="nc-iconfont nc-icon-fenxiangV6xx text-[36rpx]"></view>
+							<text class="text-[20rpx] mt-[10rpx]">分享</text>
+						</view>
+						<!-- #endif -->
+						<!-- #ifdef MP-WEIXIN -->
+						<view>
+							<nc-contact
+									:send-message-title="sendMessageTitle"
+									:send-message-path="sendMessagePath"
+									:send-message-img="sendMessageImg">
+								<view class="flex flex-col justify-center items-center mr-[38rpx]">
+									<text class="nc-iconfont nc-icon-kefuV6xx-1 text-[36rpx]"></text>
+									<text class="text-[20rpx] mt-[10rpx]">客服</text>
+								</view>
+							</nc-contact>
+						</view>
+						<!-- #endif -->
+					</view>
+					<view class="flex flex-1" v-if="goodsDetail.goods.status == 1">
+						<button
+							v-if="isShowSingleSku"
+							class="primary-btn-bg flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
+							@click="buyFn('buy_now')">立即兑换</button>
+						<button v-else
+							class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
+							>已售罄</button>
+					</view>
+					<view class="flex flex-1" v-else>
+						<button class="w-[100%] !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">该商品已下架</button>
+					</view>
+				</view>
+			</view>
+			<!-- 服务 -->
+			<view @touchmove.prevent.stop>
+				<u-popup class="popup-type" :show="servicesDataShow" @close="servicesDataShow = false">
+					<view class="popup-common min-h-[480rpx]" @touchmove.prevent.stop>
+						<view class="title">商品服务</view>
+						<scroll-view class="h-[520rpx]" scroll-y="true">
+							<view class="pl-[22rpx] pb-[28rpx] pr-[37rpx]">
+								<view class="flex mb-[28rpx]" v-for="(item, index) in goodsDetail.service">
+									<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" :src="img(item.image || 'addon/shop/icon_service.png')" mode="aspectFit" />
+									<view class="flex-1">
+										<view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.service_name }}</view>
+										<view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+				</u-popup>
+			</view>
+			<!-- 配送 -->
+			<view @touchmove.prevent.stop>
+				<u-popup class="popup-type" :show="distributionDataShow" @close="distributionDataShow = false">
+					<view class="min-h-[360rpx] popup-common" @touchmove.prevent.stop>
+						<view class="title">配送方式</view>
+						<scroll-view class="h-[520rpx]" scroll-y="true">
+							<view class="px-[var(--popup-sidebar-m)]">
+								<view class="flex mb-[40rpx]" v-for="(item, index) in goodsDetail.delivery_type_list" @click="distributionListFn(item,index)">
+									<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" :src="img('addon/shop/icon_service.png')" mode="aspectFit" />
+									<view class="flex-1">
+										<view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.name }}</view>
+										<view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+				</u-popup>
+			</view>
+			<goods-sku ref="goodsSkuRef" :goods-detail="goodsDetail" @change="specSelectFn"></goods-sku>
+			<share-poster ref="sharePosterRef" posterType="shop_point_goods" :posterParam="posterParam" :copyUrlParam="copyUrlParam" />
+		</view>
+		</scroll-view>
+		<loading-page :loading="loading"></loading-page>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, getCurrentInstance, nextTick } from 'vue';
+import { onLoad, onShow,onUnload,onPageScroll } from '@dcloudio/uni-app'
+import { img, redirect,handleOnloadParams, deepClone, goback } from '@/utils/common';
+import { t } from '@/locale';
+import { getEvaluateList } from '@/addon/shop/api/goods';
+import { getExchangeGoodsDetail } from '@/addon/shop/api/point';
+import goodsSku from '@/addon/shop/pages/point/components/goods-sku.vue';
+import useMemberStore from '@/stores/member'
+import { useShare }from '@/hooks/useShare'
+import sharePoster from '@/components/share-poster/share-poster.vue'
+import {useGoods} from '@/addon/shop/hooks/useGoods'
+
+const diyGoods = useGoods();
+// 分享
+const{setShare} = useShare()
+
+// 会员信息
+const memberStore = useMemberStore()
+const userInfo = computed(() => memberStore.info)
+
+const sendMessageTitle = ref('')
+const sendMessagePath = ref('')
+const sendMessageImg = ref('')
+
+const goodsSkuRef: any = ref(null);
+const goodsDetail: any = ref({});
+
+const isAttrFormatShow = ref(false); //控制属性是否展开
+
+const loading = ref<boolean>(false);
+const servicesDataShow = ref<boolean>(false)
+const distributionDataShow =  ref<boolean>(false) //配送
+
+const wxPrivacyPopupRef:any = ref(null)
+
+onLoad((option: any) => {
+
+	// #ifdef MP-WEIXIN
+	// 处理小程序场景值参数
+	option = handleOnloadParams(option);
+	// #endif
+	//
+	getExchangeGoodsDetail(option.id || '',).then((res: any) => {
+		if (JSON.stringify(res.data) === '[]') {
+            let goBackParameter = {
+                url:'/addon/shop/pages/index',
+                title: '找不到该商品',
+                mode: 'reLaunch'
+            };
+            goback(goBackParameter)
+			return false
+		}
+
+		goodsDetail.value = deepClone(res.data);
+
+		goodsDetail.value.delivery_type_list = goodsDetail.value.goods.delivery_type_list ? Object.values(goodsDetail.value.goods.delivery_type_list) : [];
+		goodsDetail.value.goods.goods_image = goodsDetail.value.goods.goods_image_thumb_big;
+		goodsDetail.value.goods.goods_image.forEach((item: any, index: any) => {
+			goodsDetail.value.goods.goods_image[index] = img(item);
+		})
+
+		let data: any = deepClone(res.data);
+		goodsDetail.value.goods.attr_format = []
+		if (data.goods && data.goods.attr_format) {
+			let attrFormatArr: any = deepClone(JSON.parse(data.goods.attr_format));
+			attrFormatArr.forEach((item: any, index: any) => {
+				if ((item.attr_child_value_name && !(item.attr_child_value_name instanceof Array)) || ((item.attr_child_value_name instanceof Array) && item.attr_child_value_name.length)) {
+					goodsDetail.value.goods.attr_format.push(item);
+				}
+			})
+		}
+
+		sendMessageTitle.value = goodsDetail.value.goods.goods_name
+		sendMessagePath.value = '/addon/shop/pages/point/detail?sku_id=' + goodsDetail.value.sku_id;
+		sendMessageImg.value = img(goodsDetail.value.goods.goods_cover_thumb_mid)
+
+		// 分享 - start
+		let share = {
+			title: goodsDetail.value.goods.goods_name,
+			desc: goodsDetail.value.goods.sub_title,
+			url: goodsDetail.value.goods.goods_cover_thumb_mid
+		}
+		uni.setNavigationBarTitle({
+			title: goodsDetail.value.goods.goods_name
+		})
+		setShare({
+			wechat: {
+				...share
+			},
+			weapp: {
+				...share
+			}
+		});
+		// 分享 - end
+
+		// 获取评价
+		getEvaluateListFn();
+
+		copyUrlFn();
+
+		nextTick(() => {
+			setTimeout(() => {
+				const query = uni.createSelectorQuery().in(instance);
+				query.select('.swiper-box').boundingClientRect((data: any) => {
+					swiperHeight = data ? data.height : 0;
+				}).exec();
+				query.select('.detail-head').boundingClientRect((data: any) => {
+					if (data) {
+						detailHead = data.height ? data.height : 0;
+					}
+				}).exec();
+			}, 400)
+			// #ifdef MP
+			if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+			// #endif
+		})
+	})
+})
+
+onShow(() => {
+	// 删除配送方式
+	uni.removeStorageSync('distributionType');
+})
+
+const specSelectFn = (id: any) => {
+	goodsDetail.value.skuList.forEach((item: any, index: any) => {
+		if (item.sku_id == id) {
+			Object.assign(goodsDetail.value, item);
+		}
+	})
+}
+
+// 判断单规格库存是否为0
+const isShowSingleSku = computed(() => {
+	let isSingleSpec = false // 是否为单规格，true：多规格，false：单规格
+	goodsDetail.value.skuList.forEach((item: any,index: any)=>{
+		if(item.sku_spec_format){
+			isSingleSpec = true
+		}
+	})
+
+	// 单规格，库存为0，显示已售罄
+	if(!isSingleSpec && goodsDetail.value.stock <= 0){
+	    return false;
+	}else if(!isSingleSpec && goodsDetail.value.stock > 0){
+	    // 单规格，库存大于0，可以购买
+        return true;
+    }
+	return true;
+})
+
+// 判断商品属性模块是否展示
+const isGoodsPropertyTemp = computed(() => {
+	let bool = false;
+	if(goodsDetail.value.service && goodsDetail.value.service.length || 
+	goodsDetail.value.goodsSpec && goodsDetail.value.goodsSpec.length ||
+	goodsDetail.value.goods.goods_type == 'real'&&goodsDetail.value.delivery_type_list&&goodsDetail.value.delivery_type_list.length){
+		bool = true;
+	}
+	return bool;
+})
+
+const buyFn = (type: any) => {
+	goodsSkuRef.value.open(type)
+}
+
+// 获取评价
+const evaluate = ref({
+	count : 0
+})
+
+const getEvaluateListFn = () => {
+	getEvaluateList(goodsDetail.value.goods_id).then((res: any) => {
+		evaluate.value = res.data
+	})
+}
+
+//进入评论
+const toLink = () => {
+	redirect({ url: '/addon/shop/pages/evaluate/list', param: { goods_id: goodsDetail.value.goods_id } })
+}
+
+//预览图片
+const imgListPreview = (item:any,index:any) => {
+	if(Array.isArray(item)){
+		var urlList =item;
+		if (!item.length) return false
+		uni.previewImage({
+			indicator: "number",
+			current:index,
+			loop: true,
+			urls: urlList
+		})
+	}else{
+		if (item === '') return false
+		var urlList = []
+		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+		uni.previewImage({
+			indicator: "number",
+			loop: true,
+			urls: urlList
+		})
+	}
+	
+}
+// 返回上一页
+const backToPrevious=()=> {
+	if(getCurrentPages().length > 1){
+		uni.navigateBack({
+			delta: 1
+		});
+	}else{
+        redirect({
+			url: '/addon/shop/pages/index',
+            mode: 'reLaunch'
+		});
+	}
+}
+
+/************ 选择配送方式-start ****************/
+const selectDeliveryType = ref(0);
+const distributionDataOpen = (()=>{
+	distributionDataShow.value = true;
+});
+const distributionListFn = ((data: any,index: any)=>{
+	selectDeliveryType.value =  index;
+	distributionDataShow.value = false;
+	uni.setStorageSync('distributionType', data.name);
+});
+/************ 选择配送方式-end ****************/
+
+
+/************ 自定义头部-start ****************/
+// 获取系统状态栏的高度
+let systemInfo = uni.getSystemInfoSync();
+let platform = systemInfo.platform;
+let menuButtonInfo: any = {};
+// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+// #endif
+
+// 导航栏内部盒子的样式
+const navbarInnerStyle = computed(() => {
+	let style = '';
+	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+	// #ifdef MP
+	let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width * 2 + 'rpx' : '70rpx';
+	style += 'height:' + menuButtonInfo.height + 'px;';
+	style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
+	style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
+	style += 'padding-top:' + menuButtonInfo.top + 'px;';
+	style += 'padding-bottom: 8px;';
+
+	style += 'font-size: 32rpx;';
+	if (platform === 'ios') {
+		// 苹果(iOS)设备
+		style += 'font-weight: 500;';
+	} else if (platform === 'android') {
+	  // 安卓(Android)设备
+		style += 'font-size: 36rpx;';
+	}
+	// #endif
+
+	// #ifdef H5
+	style += 'height: 100rpx;';
+	style += 'padding-right: 30rpx;';
+	style += 'padding-left: 30rpx;';
+
+	style += 'font-size: 32rpx;';
+	if (platform === 'ios') {
+		// 苹果(iOS)设备
+		style += 'font-weight: 500;';
+	} else if (platform === 'android') {
+	  // 安卓(Android)设备
+		style += 'font-size: 36rpx;';
+	}
+	// #endif
+	return style;
+})
+
+// 导航栏内部盒子的样式
+const navbarInnerArrowStyle = computed(() => {
+	let style = '';
+	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+	// #ifdef MP
+	style += "padding-left: 10rpx;"
+	style += "padding-right: 10rpx;"
+	style += 'position: absolute;';
+	style += 'left:calc( 100vw - ' + menuButtonInfo.right + 'px);';
+	style += 'font-size: 26px;';
+	// style += 'font-weight: bold;';
+	if (platform === 'ios') {
+		// 苹果(iOS)设备
+		style += 'font-weight: 700;';
+	} else if (platform === 'android') {
+	  // 安卓(Android)设备
+	}
+	// #endif
+	// #ifdef H5
+	style += 'font-size: 26px;';
+	// #endif
+	return style;
+})
+
+// 头部滚动
+const instance = getCurrentInstance();
+let swiperHeight = 0
+let detailHead = 0
+
+const detailHeadBgChange = ref(false)
+onPageScroll((e)=>{
+	let height = swiperHeight - detailHead - 20;
+	detailHeadBgChange.value = false;
+	if(e.scrollTop >= height){
+		detailHeadBgChange.value = true;
+	}
+})
+/************ 自定义头部-end ****************/
+
+const swiperClick = (index: any)=>{
+	if(typeof index == 'number') imgListPreview(goodsDetail.value.goods.goods_image,index)
+}
+
+/************* 分享海报-start **************/
+const sharePosterRef: any = ref(null);
+const copyUrlParam = ref('');
+let posterParam: any = {};
+
+// 分享海报链接
+const copyUrlFn = ()=>{
+	copyUrlParam.value = '?id='+goodsDetail.value.exchange_id;
+	if (userInfo.value && userInfo.value.member_id) copyUrlParam.value += '&mid=' + userInfo.value.member_id;
+}
+const openShareFn = ()=>{
+    posterParam.id = goodsDetail.value.exchange_id;
+    if (userInfo.value && userInfo.value.member_id) {
+        posterParam.member_id = userInfo.value.member_id;
+    }
+	sharePosterRef.value.openShare()
+}
+/************* 分享海报-end **************/
+
+// 关闭预览图片
+onUnload(()=>{
+    // #ifdef  H5 || APP
+    uni.closePreviewImage()
+    // #endif
+})
+</script>
+<style lang="scss" scoped>
+@import '@/addon/shop/styles/common.scss';
+.remove-border {
+	&::after {
+		border: none;
+	}
+}
+:deep(.u-cell-group__wrapper) {
+	.u-cell__body {
+		padding: 23rpx 32rpx;
+	}
+}
+
+.popup-type {
+	:deep(.u-popup__content) {
+		border-top-left-radius: 16rpx;
+		border-top-right-radius: 16rpx;
+		overflow: hidden;
+	}
+}
+
+.tab-bar-placeholder {
+	padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
+	padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
+}
+
+.tab-bar {
+	padding-top: 16rpx;
+	padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
+	padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
+}
+:deep(.u-count-down) .u-count-down__text{
+	color: #fff;
+	font-size: 28rpx;
+}
+:deep(.u-swiper-indicator__wrapper--line__bar){
+	height: 5rpx !important;
+}
+:deep(.u-swiper-indicator__wrapper--line){
+	height: 5rpx !important;
+}
+.datail-title{
+	background: linear-gradient(#fff 70%, #F6F6F6);
+}
+.goods-sku .value-wid{
+	width: calc(100% - 160rpx);
+}
+</style>
diff --git a/src/addon/shop/pages/point/index.vue b/src/addon/shop/pages/point/index.vue
new file mode 100644
index 0000000..24ae64b
--- /dev/null
+++ b/src/addon/shop/pages/point/index.vue
@@ -0,0 +1,86 @@
+<template>
+	<view :style="themeColor()">
+
+		<loading-page :loading="diy.getLoading()"></loading-page>
+
+		<view v-show="!diy.getLoading()">
+
+			<!-- 自定义模板渲染 -->
+			<view class="diy-template-wrap bg-index" v-if="diy.data.pageMode != 'fixed'" :style="diy.pageStyle()">
+
+				<diy-group ref="diyGroupRef" :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />
+
+			</view>
+
+			<!-- 固定模板渲染 -->
+			<view class="fixed-template-wrap" v-if="diy.data.pageMode == 'fixed'">
+
+				<fixed-group :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />
+
+			</view>
+
+		</view>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+
+	</view>
+</template>
+
+<script setup lang="ts">
+    import {ref,nextTick} from 'vue';
+    import {useDiy} from '@/hooks/useDiy'
+    import diyGroup from '@/addon/components/diy/group/index.vue'
+    import fixedGroup from '@/addon/components/fixed/group/index.vue'
+
+    const diy = useDiy({
+        name: 'DIY_SHOP_POINT_INDEX'
+    })
+
+    const diyGroupRef = ref(null)
+
+    const wxPrivacyPopupRef:any = ref(null)
+
+    // 监听页面加载
+    diy.onLoad();
+
+    // 监听页面显示
+    diy.onShow((data: any) => {
+        diyGroupRef.value?.refresh();
+	    // #ifdef MP
+	    nextTick(()=>{
+		    if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+	    })
+	    // #endif
+    });
+
+    // 监听页面隐藏
+    diy.onHide();
+	
+	// 监听页面卸载
+	diy.onUnload();
+
+    // 监听下拉刷新事件
+    diy.onPullDownRefresh()
+
+    // 监听滚动事件
+    diy.onPageScroll()
+</script>
+<style lang="scss" scoped>
+	@import '@/styles/diy.scss';
+</style>
+<style lang="scss">
+.diy-template-wrap {
+  /* #ifdef MP */
+  .child-diy-template-wrap {
+    ::v-deep .diy-group {
+      > .draggable-element.top-fixed-diy {
+        display: block !important;
+      }
+    }
+  }
+  /* #endif */
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/point/list.vue b/src/addon/shop/pages/point/list.vue
new file mode 100644
index 0000000..56fb64a
--- /dev/null
+++ b/src/addon/shop/pages/point/list.vue
@@ -0,0 +1,207 @@
+<template>
+	<view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
+		<view class="fixed left-0 right-0 top-0 product-warp bg-[#fff]">
+			
+			<view class="py-[14rpx] flex items-center justify-between px-[20rpx]">
+				<view class="flex-1 search-input">
+					<text @click.stop="searchTypeFn('all')" class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn"></text>
+					<input class="input" maxlength="50" type="text" v-model="goods_name" placeholder="请搜索您想要的商品" placeholderClass="text-[var(--text-color-light9)] text-[24rpx]" confirm-type="search" @confirm="searchTypeFn('all')">
+					<text v-if="goods_name" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="goods_name=''"></text>
+				</view>
+			</view>
+			<view class="h-[88rpx] px-[30rpx]">
+				<view class=" flex items-center justify-between text-[26rpx] text-[var(--text-color-light6)] h-[88rpx]">
+					<text class="" :class="{ '!text-[var(--primary-color)] font-500': searchType == 'total_order_num' }" @click="searchTypeFn('total_order_num')">综合排序</text>
+					<view class="flex items-center" @click="searchTypeFn('total_exchange_num')">
+						<text class="mr-[4rpx]" :class="{ '!text-[var(--primary-color)] font-500': searchType == 'total_exchange_num' }">销量</text>
+						<text v-if="sale_num == 'asc'" class="text-[16rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangshangV6xx1"
+						:class="{ '!text-[var(--primary-color)]': searchType == 'total_exchange_num' }"
+						></text>
+						<text  v-else class="text-[16rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangxiaV6xx1"
+						:class="{ '!text-[var(--primary-color)]': searchType == 'total_exchange_num' }"></text>
+					</view>
+					<view class="flex items-center" @click="searchTypeFn('price')">
+						<text class="mr-[4rpx]" :class="{'!text-[var(--primary-color)] font-500': searchType == 'price' }">价格</text>
+						<text v-if="price == 'asc'" class="text-[16rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangshangV6xx1"
+						 :class="{'!text-[var(--primary-color)]': searchType == 'price' }"></text>
+						<text v-else class="text-[16rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangxiaV6xx1"
+						 :class="{'!text-[var(--primary-color)]': searchType == 'price' }"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<mescroll-body ref="mescrollRef" top="176rpx" bottom="60px" @init="mescrollInit" :down="{ use: false }" @up="getAllAppListFn">
+			<view v-if="goodsList.length" class="sidebar-margin flex justify-between flex-wrap">
+				<template v-for="(item, index) in goodsList">
+					<view class="goods-item-style-two flex flex-col bg-[#fff] box-border rounded-[var(--rounded-mid)] overflow-hidden mt-[var(--top-m)]" @click="toDetail(item.id)">
+						<!-- <u--image width="100%" height="350rpx" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" model="aspectFill">
+							<template #error>
+								<image class="w-[100%] h-[350rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+							</template>
+						</u--image> -->
+						<image v-if="item.goods_cover_thumb_mid" class="w-[100%] h-[350rpx] rounded-tl-[var(--rounded-mid)] rounded-tr-[var(--rounded-mid)]" :src="img(item.goods_cover_thumb_mid)" :mode="'aspectFill'" @error="item.goods_cover_thumb_mid='static/resource/images/diy/shop_default.jpg'"></image>
+						<image v-else class="w-[100%] h-[350rpx] rounded-tl-[var(--rounded-mid)] rounded-tr-[var(--rounded-mid)]" :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
+						<view class="px-[16rpx] flex-1 pt-[10rpx] pb-[20rpx] flex flex-col justify-between">
+                            <view class="text-[] leading-[40rpx] text-[28rpx] multi-hidden">{{item.names}}</view>
+                            <view class="text-[24rpx] font-400 leading-[34rpx] mt-[10rpx] text-[var(--text-color-light9)]">已兑{{item.total_exchange_num}}人</view>
+                            <view class="flex justify-between flex-wrap items-center mt-[16rpx]" >
+								<view class="flex flex-col">
+									<view class="text-[var(--price-text-color)] price-font ml-[2rpx] flex items-center">
+										<text class="text-[32rpx]">{{ item.point  }}</text>
+										<text class="text-[26rpx] ml-[4rpx]">积分</text>
+									</view>
+									<view v-if="item.price&&item.price>0" class="flex items-center price-font mt-[6rpx]">
+										<text class="text-[var(--price-text-color)] font-400 text-[32rpx]">+{{ parseFloat(item.price).toFixed(2)  }}</text>
+										<text class="text-[var(--price-text-color)] font-400 ml-[4rpx] text-[20rpx]">元</text>
+									</view>
+								</view>
+								<view class="w-[120rpx] h-[54rpx] text-[22rpx] flex-center !text-[#fff] m-0 rounded-full primary-btn-bg remove-border text-center" shape="circle">去兑换</view>
+                            </view>
+                        </view>
+					</view>
+				</template>
+			</view>
+			<mescroll-empty v-if="!goodsList.length && loading" :option="{tip : '暂无商品'}"></mescroll-empty>
+		</mescroll-body>
+
+		<tabbar />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { t } from '@/locale'
+import { redirect, img } from '@/utils/common';
+import { getExchangeGoodsList } from '@/addon/shop/api/point';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import { onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const goodsList = ref<Array<any>>([]);
+const coupon_id = ref<number | string>('');
+const currGoodsCategory = ref<number | string>('');
+const mescrollRef = ref(null);
+const loading = ref<boolean>(false);
+const goods_name = ref("");
+const price = ref("");
+const sale_num = ref("");
+const searchType = ref('total_order_num');
+interface mescrollStructure {
+	num: number,
+	size: number,
+	endSuccess: Function,
+	[propName: string]: any
+}
+
+const getAllAppListFn = (mescroll: mescrollStructure) => {
+	loading.value = false;
+	let data: object = {
+		goods_category: currGoodsCategory.value,
+		page: mescroll.num,
+		limit: mescroll.size,
+		names: goods_name.value,
+		coupon_id: coupon_id.value,
+		order: searchType.value === 'total_order_num' ? '' : searchType.value,
+		sort: searchType.value == 'price' ? price.value : sale_num.value
+	};
+	getExchangeGoodsList(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>);
+		//设置列表数据
+		if (Number(mescroll.num) === 1) {
+			goodsList.value = []; //如果是第一页需手动制空列表
+		}
+		goodsList.value = goodsList.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+		loading.value = true;
+	}).catch(() => {
+		loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+// 搜索
+const searchTypeFn = (type:string) => {
+	searchType.value = type;
+    if ( type == 'total_order_num') {
+		sale_num.value = '';
+		price.value = '';
+	}
+	if ( type == 'price') {
+		sale_num.value = '';
+		if(price.value){
+			price.value = price.value == 'asc' ? 'desc' : 'asc';
+		}else{
+			price.value = 'asc';
+		}
+	}
+	if ( type == 'total_exchange_num') {
+		price.value = '';
+		if(sale_num.value){
+			sale_num.value = sale_num.value == 'asc' ? 'desc' : 'asc';
+		}else{
+			sale_num.value = 'asc';
+		}
+	}
+	goodsList.value = [];
+    getMescroll().resetUpScroll();
+}
+const toDetail = (id: string | number) => {
+	redirect({ url: '/addon/shop/pages/point/detail', param: { id: id }, mode: 'navigateTo' })
+}
+onMounted(() => {
+	setTimeout(() => {
+		getMescroll().optUp.textNoMore = t("end");
+	}, 500)
+});
+</script>
+
+<style lang="scss" scoped>
+.bg-color{
+	background: linear-gradient( 180deg, #EF000C 16%, rgba(239,0,12,0) 92%);
+}
+.nav-item.active {
+	color: $u-primary;
+}
+
+.scroll-view-wrap {
+	word-break: keep-all;
+}
+
+.text-color {
+	color: var(--primary-color);
+}
+
+.label-select {
+	color: var(--primary-color);
+	border-color: var(--primary-color);
+	background-color: var(--primary-color-light);
+}
+
+:deep(.u-popup .u-transition) {
+	top: 156rpx !important;
+}
+
+.product-warp {
+	z-index: 99999;
+}
+
+:deep(.tab-bar-placeholder) {
+	display: none !important;
+}
+
+:deep(.u-tabbar__placeholder) {
+	display: none !important;
+}
+:deep(.u-input__content__clear){
+	width: 28rpx;
+	height: 28rpx;
+	font-size: 28rpx;
+	background-color: var(--text-color-light9);
+}
+.goods-item-style-two{
+	width: calc(50% - 10rpx);
+}
+</style>
\ No newline at end of file
diff --git a/src/addon/shop/pages/point/order_list.vue b/src/addon/shop/pages/point/order_list.vue
new file mode 100644
index 0000000..e2e2c28
--- /dev/null
+++ b/src/addon/shop/pages/point/order_list.vue
@@ -0,0 +1,296 @@
+<template>
+	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden order-list" :style="themeColor()">
+		<view class="fixed left-0 top-0 right-0 z-10" v-if="statusLoading">
+			<scroll-view :scroll-x="true" class="tab-style-2">
+				<view class="tab-content">
+					<view class="tab-items" :class="{ 'class-select': orderState === item.status.toString() }" @click="orderStateFn(item.status)" v-for="(item, index) in orderStateList">{{ item.name }}</view>
+				</view>
+			</scroll-view>
+		</view>
+		<mescroll-body ref="mescrollRef" top="88rpx" @init="mescrollInit" :down="{ use: false }" @up="getShopOrderFn">
+			<view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
+				<template v-for="(item, index) in list" :key="index">
+					<view class="mb-[var(--top-m)] card-template">
+						<view @click="toLink(item)">
+							<view class="flex justify-between items-center">
+								<view class="text-[#303133] text-[26rpx] font-400 leading-[30rpx]">
+									<text>{{ t('orderNo') }}:</text>
+									<text class="ml-[10rpx]">{{ item.order_no }}</text>
+									<text class="text-[303133] text-[26rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]" @click.stop="copy(item.order_no)"></text>
+								</view>
+								<view class="text-[#303133] text-[26rpx] leading-[34rpx]" :class="{'text-primary': item.status  == 1,'!text-[var(--text-color-light9)]' :item.status  == 5 || item.status  == -1}">{{ item.status_name.name }}</view>
+							</view>
+							<view class="flex box-border mt-[20rpx]" v-for="(subitem, index) in item.order_goods" :key="index">
+								
+								<image v-if="subitem.goods_image_thumb_small" class="w-[150rpx] h-[150rpx] rounded-[var(--rounded-mid)]" :src="img(subitem.goods_image_thumb_small)" :mode="'aspectFill'" @error="subitem.goods_image_thumb_small='static/resource/images/diy/shop_default.jpg'"></image>
+								<image v-else class="w-[150rpx h-[150rpx] rounded-[var(--rounded-mid)]" :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
+								<view class="ml-[20rpx] flex flex-1 flex-col box-border">
+									<view class="max-w-[490rpx] text-[28rpx] leading-[40rpx] font-400 truncate text-[#303133]">{{ subitem.goods_name }}</view>
+									<view class="flex justify-between items-baseline text-[#303133] mt-[14rpx]">
+										<view>
+											<view v-if="subitem.sku_name" class="text-[24rpx] text-[var(--text-color-light6)] font-400 truncate leading-[34rpx] max-w-[369rpx] mb-[10rpx]">{{ subitem.sku_name }}</view>
+											<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)]" v-if="item.delivery_type != 'virtual'">
+												{{t('deliveryType') }} ： {{item.delivery_type_name}}
+											</view>
+											<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)]" v-else>{{t('createTime') }} ：{{item.create_time}}</view>
+										</view>
+										<text class="text-right text-[26rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ subitem.num }}</text>
+									</view>
+								
+								</view>
+							</view>
+						</view>
+						<view class="flex justify-end items-center mt-[20rpx]">
+							<view class="text-[22rpx] text-[var(--text-color-light9)] leading-[30rpx] mr-[6rpx]" v-if="parseFloat(item.delivery_money)">{{ t('service') }}</view>
+							<view class="flex items-center">
+								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">{{ t('actualPayment') }}：</view>
+								<view class="text-[var(--price-text-color)] price-font">
+										<text class="text-[36rpx] mr-[2rpx]">{{ item.point }}</text>
+										<text  class="text-[30rpx]">{{ t('point') }}</text>
+										<block v-if="parseFloat(item.order_money)">
+											<text class="text-[30rpx] mx-[4rpx]">+</text>
+											<text class="text-[36rpx] price-font">{{ parseFloat(item.order_money)}}</text>
+											<text class="text-[30rpx] price-font ml-[2rpx]">{{ t('money') }}</text>
+										</block>
+								</view>
+							</view>
+						</view>
+						<view class="flex justify-end text-[28rpx] mt-[20rpx] items-center" v-if="(item.status == 1) || (item.status == 3) || (item.status == 5 && evaluateConfig.is_evaluate == 1)">
+							<view
+								class="text-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full text-[var(--text-color-light6)] box-bordertext-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full text-[var(--text-color-light6)] box-border"
+								@click.stop="orderBtnFn(item, 'close')" v-if="item.status == 1">{{ t('orderClose') }}</view>
+							<view
+								class="text-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid text-[#fff] border-primary bg-primary rounded-full ml-[20rpx] box-border"
+								@click.stop="orderBtnFn(item, 'pay')" v-if="item.status == 1">{{ t('topay') }}</view>
+							<view
+								class="text-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid text-[#fff] border-primary bg-primary rounded-full ml-[20rpx] box-border"
+								@click.stop="orderBtnFn(item, 'finish')" v-if="item.status == 3">{{ t('orderFinish') }}</view>
+							<view
+								class="text-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full ml-[20rpx]  text-[var(--text-color-light6)] box-border" 
+								v-if="item.status == 5 && evaluateConfig.is_evaluate == 1"
+								@click.stop="orderBtnFn(item, 'evaluate')">{{ item.is_evaluate == 1 ? t('selectedEvaluate') : t('evaluate') }}</view>
+						</view>
+					</view>
+				</template>
+			</view>
+			<mescroll-empty v-if="!list.length && loading" :option="{tip : '暂无订单'}"></mescroll-empty>
+		</mescroll-body>
+		<pay ref="payRef" @close="payClose"></pay>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { t } from '@/locale'
+import { img, redirect,copy } from '@/utils/common';
+import { getShopOrderStatus, getShopOrder, orderClose, orderFinish } from '@/addon/shop/api/order';
+import { getEvaluateConfig } from '@/addon/shop/api/shop';
+import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+import useConfigStore from "@/stores/config";
+
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+const list = ref<Array<Object>>([]);
+const loading = ref<boolean>(false);
+const statusLoading = ref<boolean>(false);
+const orderState = ref('')
+const orderStateList: any = ref([]);
+const evaluateConfig = ref("")
+
+const mch_id = ref('')
+const isTradeManaged = ref(false)
+
+onLoad((option: any) => {
+	orderState.value = option.status || "";
+	evaluateEvent()
+	getShopOrderStatusFn();
+});
+
+const evaluateEvent = () => {
+	getEvaluateConfig().then((data: any) => {
+		evaluateConfig.value = data.data
+	})
+}
+
+const getShopOrderFn = (mescroll: any) => {
+	loading.value = false;
+	let data: object = {
+		page: mescroll.num,
+		limit: mescroll.size,
+		status: orderState.value,
+		activity_type:'exchange'
+	};
+
+	getShopOrder(data).then((res: any) => {
+		let newArr = (res.data.data as Array<Object>);
+		//设置列表数据
+		if (mescroll.num == 1) {
+			list.value = []; //如果是第一页需手动制空列表
+		}
+		list.value = list.value.concat(newArr);
+		mescroll.endSuccess(newArr.length);
+
+        mch_id.value = res.data.mch_id;
+        isTradeManaged.value = res.data.is_trade_managed;
+		loading.value = true;
+	}).catch(() => {
+		loading.value = true;
+		mescroll.endErr(); // 请求失败, 结束加载
+	})
+}
+
+const getShopOrderStatusFn = () => {
+	statusLoading.value = false;
+	orderStateList.value = [];
+	let obj = { name: '全部', status: '' };
+	orderStateList.value.push(obj);
+
+	getShopOrderStatus().then((res: any) => {
+		Object.values(res.data).forEach((item, index) => {
+			orderStateList.value.push(item);
+		});
+		statusLoading.value = true;
+	}).catch(() => {
+		statusLoading.value = true;
+	})
+}
+
+const orderStateFn = (status: any) => {
+	orderState.value = status.toString();
+	list.value = [];
+	getMescroll().resetUpScroll();
+};
+
+const toLink = (data: any) => {
+	redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: data.order_id } })
+}
+
+// 支付
+const payRef = ref(null)
+const orderBtnFn = (data: any, type = '') => {
+	if (type == 'pay')
+		payRef.value?.open(data.order_type, data.order_id, `/addon/shop/pages/order/detail?order_id=${data.order_id}`);
+	else if (type == 'close') {
+		close(data);
+	} else if (type == 'finish') {
+		finish(data);
+	} else if (type == 'evaluate') {
+		if (!data.is_evaluate) {
+			redirect({ url: '/addon/shop/pages/evaluate/order_evaluate', param: { order_id: data.order_id } })
+		} else {
+			redirect({ url: '/addon/shop/pages/evaluate/order_evaluate_view', param: { order_id: data.order_id } })
+		}
+	}
+}
+
+//关闭订单
+const close = (item: any) => {
+	uni.showModal({
+		title: '提示',
+		content: '您确定要关闭该订单吗？',
+        confirmColor: useConfigStore().themeColor['--primary-color'],
+		success: res => {
+			if (res.confirm) {
+				orderClose(item.order_id).then((data) => {
+					getMescroll().resetUpScroll();
+				})
+			}
+		}
+	})
+}
+
+//订单完成
+const finish = (item: any) => {
+    // 如果不在微信小程序中
+    // #ifndef MP-WEIXIN
+	uni.showModal({
+		title: '提示',
+		content: '您确定物品已收到吗？',
+        confirmColor: useConfigStore().themeColor['--primary-color'],
+		success: res => {
+			if (res.confirm) {
+				orderFinish(item.order_id).then((data) => {
+					getMescroll().resetUpScroll();
+				})
+			}
+		}
+	})
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    // 检测微信小程序是否已开通发货信息管理服务
+    if (item.pay && item.pay.type == 'wechatpay' && isTradeManaged.value && wx.openBusinessView) {
+        wx.openBusinessView({
+            businessType: 'weappOrderConfirm',
+            extraData: {
+                merchant_id: mch_id.value,
+                merchant_trade_no: item.out_trade_no
+            },
+            success: (res:any) => {
+                orderFinish(item.order_id).then((data) => {
+                    getMescroll().resetUpScroll();
+                })
+            },
+            fail: (res:any) => {
+                console.log('小程序确认收货组件打开失败 fail', res);
+            }
+        })
+    }else{
+        uni.showModal({
+            title: '提示',
+            content: '您确定物品已收到吗？',
+            confirmColor: useConfigStore().themeColor['--primary-color'],
+            success: res => {
+                if (res.confirm) {
+                    orderFinish(item.order_id).then((data) => {
+                        getMescroll().resetUpScroll();
+                    })
+                }
+            }
+        })
+    }
+    // #endif
+}
+</script>
+<style>
+.order-list .mescroll-body {
+	padding-bottom: constant(safe-area-inset-bottom) !important;
+	padding-bottom: env(safe-area-inset-bottom) !important;
+}
+</style>
+<style lang="scss" scoped>
+.text-item {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+.text-color {
+	color: var(--primary-color);
+}
+
+.bg-color {
+	background-color: var(--primary-color);
+}
+
+.class-select {
+	position: relative;
+	font-weight: 500;
+	color: var(--primary-color);
+	&::before {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		height: 4rpx;
+		border-radius: 4rpx;
+		background-color: var(--primary-color);
+		width: 40rpx;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+</style>
diff --git a/src/addon/shop/pages/point/payment.vue b/src/addon/shop/pages/point/payment.vue
new file mode 100644
index 0000000..837a632
--- /dev/null
+++ b/src/addon/shop/pages/point/payment.vue
@@ -0,0 +1,409 @@
+<template>
+    <view :style="themeColor()">
+        <view class="bg-[var(--page-bg-color)] min-h-[100vh]" v-if="orderData">
+            <view class="pt-[30rpx] sidebar-margin payment-bottom">
+                <!-- 配送方式 -->
+                <view class="mb-[var(--top-m)] rounded-[var(--rounded-big)] bg-white" v-if="orderData.basic.has_goods_types.includes('real') && delivery_type_list.length">
+                    <view class="rounded-tl-[var(--rounded-big)] rounded-tr-[var(--rounded-big)] head-tab flex items-center w-full bg-[#f1f1f1]" v-if="delivery_type_list.length > 1">
+                        <view v-for="(item, index) in delivery_type_list" :key="index"  class="head-tab-item flex-1 relative" :class="{'active': index === activeIndex}">
+                            <view class="h-[74rpx] relative z-10 text-center leading-[74rpx] text-[28rpx]" @click="switchDeliveryType(item.key, index)">
+                                {{ item.name }}
+                            </view>
+                            <image v-if="index === activeIndex && delivery_type_list.length == 3" class="tab-image absolute bottom-[-2rpx] h-[94rpx] w-[240rpx]" :src="img(`addon/shop/payment/tab_${index}.png`)" mode="aspectFit"></image>
+                            <image v-else-if="index === activeIndex && delivery_type_list.length == 2" class="tab-img absolute  bottom-[-2rpx]  h-[95rpx] w-[354rpx]" :src="img(`addon/shop/payment/tabstyle_${index}.png`)" mode="aspectFit"></image>
+                        </view>
+                    </view>
+                    <view class="min-h-[140rpx] flex items-center px-[30rpx]">
+                        <!-- 收货地址 -->
+                        <view class="w-full" v-if="['express', 'local_delivery'].includes(createData.delivery.delivery_type)" @click="toSelectAddress">
+                            <view v-if="!$u.test.isEmpty(orderData.delivery.take_address)" class="pt-[20rpx] pb-[30rpx] flex items-center">
+								<image class="w-[60rpx] h-[60rpx] mr-[20rpx] flex-shrink-0" :src="img('addon/shop/payment/position_01.png')" mode="aspectFit"></image>
+								<view class="flex flex-col overflow-hidden">
+									<text class="text-[26rpx] text-[var(--text-color-light9)] mt-[16rpx] truncate max-w-[536rpx]">{{orderData.delivery.take_address.full_address.split(orderData.delivery.take_address.address)[0]}}</text>
+									<text class="font-500 text-[30rpx] mt-[14rpx] text-[#333] truncate max-w-[536rpx]">{{orderData.delivery.take_address.address}}</text>
+									<view class="flex items-center text-[26rpx] text-[var(--text-color-light6)] mt-[16rpx]">
+									    <text class="mr-[16rpx]">{{ orderData.delivery.take_address.name }}</text>
+									    <text>{{ mobileHide(orderData.delivery.take_address.mobile) }}</text>
+									</view>
+								</view>
+								<text class="ml-auto nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                            <view v-else class="flex items-center">
+                                <image class="w-[26rpx] h-[30rpx] mr-[10rpx]" :src="img('addon/shop/payment/position_02.png')" mode="aspectFit"></image>
+                                <text class="text-[28rpx]">添加收货地址</text>
+                                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)] ml-auto"></text>
+                            </view>
+                        </view>
+
+                        <!-- 自提点 -->
+                        <view class="flex items-center w-full flex items-center" v-if="createData.delivery.delivery_type == 'store'" @click="storeRef.open()">
+                            <view v-if="!$u.test.isEmpty(orderData.delivery.take_store)" class="pt-[26rpx] pb-[30rpx] w-full flex items-centerv">
+                                <view class="flex flex-col">
+									<view class="text-[30rpx] font-500 text-[#303133] mb-[20rpx]">{{ orderData.delivery.take_store.store_name }}</view>
+									<view class="text-[24rpx] text-[var(--text-color-light6)] mb-[14rpx]">门店地址：{{ orderData.delivery.take_store.full_address }}</view>
+                                    <view class="text-[24rpx] text-[var(--text-color-light6)] mb-[14rpx]">联系电话：{{ orderData.delivery.take_store.store_mobile }}</view>
+                                    <view class="text-[24rpx] text-[var(--text-color-light6)]">营业时间：{{ orderData.delivery.take_store.trade_time }}</view>
+                                </view>
+								<text class="ml-auto nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                            <view v-else class="flex items-center w-full">
+                                <image class="w-[26rpx] h-[30rpx] mr-[10rpx]" :src="img('addon/shop/payment/position_02.png')" mode="aspectFit"></image>
+                                <text class="text-[28rpx]">请选择自提点</text>
+                                <text class="ml-auto nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="mb-[var(--top-m)] card-template h-[100rpx] flex items-center" v-if="orderData.basic.has_goods_types.includes('real') && !delivery_type_list.length">
+                    <p class="text-[28rpx] text-[var(--primary-color)]">商家尚未配置配送方式</p>
+                </view>
+
+                <view class="mb-[var(--top-m)] card-template">
+                    <view class="mb-[30rpx]">
+                        <view class="flex" v-for="(item, key, index) in orderData.goods_data" :key="index" :class="{'pb-[40rpx]': (index + 1) != Object.keys(orderData.goods_data).length}">
+                            <u--image radius="var(--goods-rounded-big)" width="180rpx" height="180rpx" :src="img(item.sku_image.split(',')[0])" model="aspectFill">
+                                <template #error>
+									<image class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"/>
+                                </template>
+                            </u--image>
+                            <view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] py-[6rpx]">
+                                <view class="line-normal">
+                                    <view class="truncate text-[#303133] text-[28rpx] leading-[32rpx]">
+                                        {{ item.goods.goods_name }}
+                                    </view>
+                                    <view v-if="item.sku_name" class="mt-[14rpx] flex">
+                                        <text class="truncate text-[24rpx] text-[var(--text-color-light9)] leading-[28rpx]">{{ item.sku_name }}</text>
+                                    </view>
+                                </view>
+                                <view class="mb-auto" :class="{'mt-[6rpx]': !item.sku_name}"  v-if="item.not_support_delivery">
+                                    <u-alert type="error" description="该商品不支持当前所选配送方式" class="leading-[30rpx] !inline-block" fontSize="11"></u-alert>
+                                </view>
+                                <view class="flex justify-between items-baseline">
+                                    <view class="text-[var(--price-text-color)] flex items-baseline  price-font">
+										<view class="flex items-baseline price-font">
+											<text class="text-[40rpx] font-200">{{item.exchange_info.point}}</text>
+											<text class="text-[32rpx]">积分</text>
+										</view>
+										<block v-if="parseFloat(item.price)">
+											<text class="mx-[4rpx] text-[32rpx]">+</text>
+											<view class="flex items-baseline price-font">
+												<text class="text-[40rpx] font-200">{{ parseFloat(item.price).toFixed(2) }}</text>
+												<text class="text-[32rpx]">元</text>
+											</view>
+										</block>
+                                    </view>
+                                    <view class="font-400 text-[28rpx] text-[#303133]">
+                                        <text>x</text>
+                                        <text>{{ item.num }}</text>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 买家留言 -->
+                    <view class="bg-white flex items-center leading-[30rpx]">
+                        <view class="text-[28rpx] w-[150rpx] text-[#303133]">买家留言</view>
+                        <view class="flex-1 text-[#303133]">
+                            <input type="text" v-model="createData.member_remark" class="text-right text-[#333] text-[28rpx]" maxlength="50" placeholder="请输入留言信息给卖家" placeholder-class="text-[var(--text-color-light9)] text-[28rpx]">
+                        </view>
+                        <!-- <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text> -->
+                    </view>
+                    <!-- 发票 -->
+                    <view class="flex items-center text-[#303133] leading-[30rpx] mt-[30rpx]" @click="invoiceRef.open()" v-if="invoiceRef && invoiceRef.invoiceOpen">
+                        <view class="text-[28rpx] w-[150rpx] text-[#303133]">发票信息</view>
+                        <view class="flex-1 w-0 text-right truncate">
+                            <text class="text-[28rpx] text-[#333]">{{ createData.invoice.header_name || '不需要发票' }}</text>
+                        </view>
+                        <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
+                    </view>
+                </view>
+
+                <view class="card-template">
+                    <view class="title">价格明细</view>
+                    <view class="card-template-item">
+                        <view class="text-[28rpx] w-[150rpx] leading-[30rpx] text-[#303133]">商品金额</view>
+                        <view class="flex-1 w-0 text-right  price-font text-[#333] text-[32rpx]">
+							<view class="inline-block">
+								<text class="text-[32rpx] mr-[2rpx]">{{ orderData.basic.point_sum }}</text>
+								<text class="text-[30rpx]">积分</text>
+							</view>
+							<block v-if="orderData.basic && parseFloat(orderData.basic.goods_money)">
+								<text class="text-[28rpx] mx-[4rpx]">+</text>
+								<view class="inline-block">
+									<text class="text-[32rpx] mr-[2rpx]">{{ parseFloat(orderData.basic.goods_money).toFixed(2) }}</text>
+									<text class="text-[30rpx]">元</text>
+								</view>
+							</block>
+                        </view>
+                    </view>
+                    <view class="card-template-item" v-if="orderData.basic.delivery_money">
+                        <view class="text-[26rpx] w-[150rpx] leading-[30rpx] text-[#303133]">配送费用</view>
+                        <view class="flex-1 w-0 text-right price-font text-[#333] text-[32rpx]">
+                            ￥{{ parseFloat(orderData.basic.delivery_money) }}
+                        </view>
+                    </view>
+                    <view class="card-template-item" v-if="orderData.basic.discount_money">
+                        <view class="text-[26rpx] w-[150rpx] leading-[30rpx] text-[#303133]">优惠金额</view>
+                        <view class="flex-1 w-0 text-right text-[var(--price-text-color)] text-[32rpx] price-font leading-[1]">
+                            -￥{{ parseFloat(orderData.basic.discount_money) }}
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
+                <view class="flex-1 flex items-center justify-between pl-[30rpx] pr-[20rpx]">
+                    <view class="flex items-baseline">
+                        <text class="text-[26rpx] text-[#333] leading-[32rpx]">合计：</text>
+						<text class="text-[var(--price-text-color)] price-font inline-block">
+							<text class="text-[44rpx]">{{ orderData.basic.point_sum }}</text>
+							<text class="text-[38rpx]">积分</text>
+						</text>
+						<block v-if="orderData.basic && parseFloat(orderData.basic.goods_money)">
+							<text class="text-[38rpx] text-[var(--price-text-color)] price-font mx-[4rpx]">+</text>
+							<view class="inline-block">
+								<text class="text-[44rpx] text-[var(--price-text-color)] price-font">{{ parseFloat(orderData.basic.order_money).toFixed(2) }}</text>
+								<text class="text-[38rpx] text-[var(--price-text-color)] price-font">元</text> 
+							</view>
+						</block>
+                    </view>
+                    <button class="primary-btn-bg w-[196rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] !border-[0] rounded-[100rpx] m-0" hover-class="none" @click="create">提交订单</button>
+                </view>
+            </u-tabbar>
+            <!-- 选择自提点 -->
+            <select-store ref="storeRef" @confirm="confirmSelectStore" />
+            <!-- 发票 -->
+            <invoice ref="invoiceRef" @confirm="confirmInvoice" />
+			<!-- 地址 -->
+			<address-list ref="addressRef" @confirm="confirmAddress" />
+
+            <pay ref="payRef" @close="payClose" />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { orderCreateCalculate, orderCreate } from '@/addon/shop/api/point'
+import { redirect, img, moneyFormat, mobileHide } from '@/utils/common'
+import selectStore from './../order/components/select-store/select-store'
+import invoice from './../order/components/invoice/invoice'
+import addressList from './components/address-list/address-list'
+import { useSubscribeMessage } from '@/hooks/useSubscribeMessage'
+
+const createData: any = ref({
+    order_key: '',
+    member_remark: '',
+    discount: {},
+    invoice: {},
+    delivery: {
+        delivery_type: ''
+    }
+})
+
+const orderData = ref(null)
+const storeRef = ref()
+const payRef = ref()
+const invoiceRef = ref()
+const createLoading = ref(false)
+const activeIndex = ref(0)//配送方式激活
+const delivery_type_list = ref([])
+const addressRef = ref()
+uni.getStorageSync('orderCreateData') && Object.assign(createData.value, uni.getStorageSync('orderCreateData'))
+
+// 选择地址之后跳转回来
+const selectAddress = uni.getStorageSync('selectAddressCallback')
+if (selectAddress) {
+    createData.value.order_key = ''
+    createData.value.delivery.delivery_type = selectAddress.delivery
+    createData.value.delivery.take_address_id = selectAddress.address_id
+    uni.removeStorage({ key: 'selectAddressCallback' })
+}
+
+// 切换配送方式
+const switchDeliveryType = (type: string, index: number) => {
+    if (createData.value.delivery.delivery_type != type) {
+        activeIndex.value = index
+        createData.value.order_key = ''
+        createData.value.delivery.delivery_type = type
+        createData.value.delivery.take_address_id = 0
+        calculate()
+    }
+}
+
+/**
+ * 订单计算
+ */
+const calculate = () => {
+    orderCreateCalculate(createData.value).then(({data}) => {
+        orderData.value = data
+        createData.value.order_key = data.order_key
+        if (orderData.value.delivery.delivery_type_list) {
+            delivery_type_list.value = Object.values(orderData.value.delivery.delivery_type_list)
+        }
+
+        if (selectAddress) activeIndex.value = delivery_type_list.value.findIndex(el => el.key === orderData.value.delivery.delivery_type)
+        !createData.value.delivery.delivery_type && data.delivery.delivery_type && (createData.value.delivery.delivery_type = data.delivery.delivery_type)
+    }).catch()
+}
+calculate()
+
+// 改变配送方式
+watch(
+	() => delivery_type_list.value.length,
+	(newValue, oldValue) => {
+		if(delivery_type_list.value.length && uni.getStorageSync('distributionType')){
+			delivery_type_list.value.forEach((item: any,index: any)=>{
+				if(item.name == uni.getStorageSync('distributionType')){
+					activeIndex.value = index;
+					switchDeliveryType(item.key, index)
+				}
+			})
+			uni.removeStorage({ key: 'distributionType' })
+		}
+	}
+)
+
+let orderId = 0
+/**
+ * 订单创建
+ */
+const create = () => {
+    if (!verify() || createLoading.value) return
+    createLoading.value = true
+
+    useSubscribeMessage().request('shop_order_pay,shop_order_delivery')
+
+    orderCreate(createData.value).then(({ data }) => {
+        orderId = data.order_id
+        if (orderData.value.basic.order_money == 0) {
+            redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: orderId }, mode: 'redirectTo' })
+        } else {
+            payRef.value?.open(data.trade_type, data.order_id, `/addon/shop/pages/order/detail?order_id=${ data.order_id }`)
+        }
+    }).catch(() => {
+        createLoading.value = false
+    })
+}
+
+/**
+ * 下单校验
+ */
+const verify = () => {
+    const data = createData.value
+    let verify = true
+
+    if (orderData.value.basic.has_goods_types.includes('real')) {
+        if (['express', 'local_delivery'].includes(data.delivery.delivery_type) && !orderData.value.delivery.take_address) {
+            uni.showToast({ title: '请选择收货地址', icon: 'none' })
+            return false
+        }
+
+        if (data.delivery.delivery_type == 'store' && !data.delivery.take_store_id) {
+            uni.showToast({ title: '请选择自提点', icon: 'none' })
+            return false
+        }
+    }
+
+    return verify
+}
+
+/**
+ * 支付弹窗关闭
+ */
+const payClose = () => {
+    redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: orderId }, mode: 'redirectTo' })
+}
+
+/**
+ * 选择地址
+ */
+const toSelectAddress = () => {
+	let data: any = {};
+	data.delivery = createData.value.delivery.delivery_type;
+	data.type = createData.value.delivery.delivery_type == 'local_delivery' ? 'location_address' : 'address';
+	data.id = orderData.value.delivery.take_address.id;
+	addressRef.value.open(data);
+}
+
+/**
+ * 选择自提点
+ */
+const confirmSelectStore = (store: any) => {
+    createData.value.delivery.take_store_id = ((store && store.store_id) ? store.store_id: 0)
+    calculate()
+}
+
+const confirmInvoice = (invoice: object) => {
+    createData.value.invoice = invoice
+}
+
+const confirmAddress = (data:object) => {
+	createData.value.order_key = ''
+	createData.value.delivery.delivery_type = data.delivery
+	createData.value.delivery.take_address_id = data.address_id
+	calculate();
+}
+</script>
+
+<style lang="scss" scoped>
+.head-tab{
+	.head-tab-item{
+		.tab-image{
+            left: 50%;
+			transform: translateX(-50%);
+		}
+		&:nth-child(1).active{
+			view{
+				padding-right: 40rpx;
+			}
+		}
+		&:nth-child(2){
+			.tab-image{
+				width: 312rpx;
+			}
+		}
+		&:nth-child(3).active{
+			view{
+				padding-left: 30rpx;
+			}
+		}
+		&.active{
+			view{
+                font-weight: bold;
+				color: var(--primary-color);
+			}
+		}
+        .tab-img{
+            left: 50%;
+			transform: translateX(-50%);
+        }
+
+	}
+}
+
+:deep(.u-alert) {
+    padding: 6rpx 16rpx !important;
+    display: inline-block !important;
+}
+.alert-wrap{
+    display: inline-block !important;
+    :deep(.u-fade-enter-active){
+        display: inline-block !important;
+    }
+}
+
+.text-ellipsis {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+.line-normal{
+    line-height: normal;
+}
+.payment-bottom{
+	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+</style>
diff --git a/src/addon/shop/pages/refund/apply.vue b/src/addon/shop/pages/refund/apply.vue
new file mode 100644
index 0000000..871a525
--- /dev/null
+++ b/src/addon/shop/pages/refund/apply.vue
@@ -0,0 +1,285 @@
+<template>
+    <view :style="themeColor()">
+        <swiper :indicator-dots="false" :autoplay="false" :disable-touch="true" :current="step" class="h-screen" :duration="300" v-if="detail">
+            <swiper-item>
+                <scroll-view scroll-y="true" class="bg-page min-h-screen overflow-hidden">
+                    <view class="m-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="flex">
+                            <view class="w-[120rpx] h-[120rpx] flex items-center justify-center">
+                            	<u--image :radius="'var(--goods-rounded-small)'" width="120rpx" height="120rpx" :src="img(orderDetail.sku_image.split(',')[0])" model="aspectFill">
+                            	    <template #error>
+                            	        <image class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+                            	    </template>
+                            	</u--image>
+                            </view>
+                            <view class="flex-1 w-0 ml-[20rpx]">
+								<view class="text-ellipsis text-[28rpx] leading-normal truncate">{{orderDetail.goods_name}}</view>
+								<view v-if="orderDetail.sku_name" class="mt-[6rpx] text-[24rpx] leading-[1.3] text-[var(--text-color-light9)] truncate">{{ orderDetail.sku_name }}</view>
+                            </view>
+                        </view>
+                    </view>
+
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="py-[var(--pad-top-m)] flex items-center" @click="selectRefundType(1)">
+                            <view class="flex-1">
+                                <view class="text-[30rpx]">仅退款</view>
+                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]" v-if="orderDetail.goods_type == 'real'">未收到货，或与商家协商一致不用退货只退款</view>
+                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]" v-else-if="orderDetail.goods_type == 'virtual'">与商家协商一致不用退货只退款</view>
+                            </view>
+                            <text class="nc-iconfont nc-icon-youV6xx text-[28rpx] text-[var(--text-color-light9)]"></text>
+                        </view>
+						
+                        <view class="py-[var(--pad-top-m)] flex items-center border-0 !border-t !border-[#f5f5f5] border-solid" v-if="orderDetail.goods_type == 'real' && (!orderDetail.delivery_status || orderDetail.delivery_status != 'wait_delivery')" @click="selectRefundType(2)">
+                            <view class="flex-1">
+                                <view class="text-[30rpx]">退货退款</view>
+                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]">已收到货，需退还收到的货物</view>
+                            </view>
+                            <text class="nc-iconfont nc-icon-youV6xx text-[28rpx] text-[var(--text-color-light9)]"></text>
+                        </view>
+                    </view>
+                </scroll-view>
+            </swiper-item>
+            <swiper-item>
+				<scroll-view scroll-y="true" class="bg-page min-h-screen overflow-hidden">
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="py-[var(--pad-top-m)] flex justify-between items-center">
+                            <view class="text-[28rpx]">退款原因</view>
+                            <view class="flex ml-[auto] items-center h-[30rpx]" @click="refundCausePopup = true">
+								<text class="text-[26rpx] text-[var(--text-color-light9)] truncate max-w-[460rpx]">{{ formData.reason || '请选择' }}</text>
+                                <text class="nc-iconfont nc-icon-youV6xx pt-[4rpx] text-[24rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="py-[var(--pad-top-m)]">
+							<view class="flex items-center justify-between">
+								<view class="text-[28rpx] font-500">退款金额</view>
+								<view class="flex justify-end items-center text-[var(--price-text-color)] price-font">
+								    <text class="font-500 text-[36rpx] leading-none">￥</text>
+								    <!-- <input type="digit" v-model.number="formData.apply_money" class="font-500 text-[36rpx] leading-none" :style="{ width: inputWidth(formData.apply_money) }" @blur="handleInput"> -->
+								    <text class="font-500 text-[36rpx] leading-none">{{ formData.apply_money }}</text>
+								</view>
+							</view>
+							<view class="text-right text-[24rpx] text-[var(--text-color-light9)] mt-[10rpx]">
+								<!-- <text>最多可退￥{{ refundMoney.refund_money }}</text> -->
+								<text v-if="refundMoney.is_refund_delivery === 1 && Number(refundMoney.refund_delivery_money) > 0" class="ml-[10rpx]">(包含运费￥{{ refundMoney.refund_delivery_money }})</text>
+							</view>
+                        </view>
+                    </view>
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="pt-[var(--pad-top-m)] pb-[14rpx] ">
+                            <view class="text-[28rpx] flex items-center">
+								<text class="font-500">上传凭证</text>
+								<text class="text-[24rpx] text-[var(--text-color-light9)] ml-[10rpx]">选填</text>
+							</view>
+                            <view class="mt-[30rpx]">
+                                <u-upload :fileList="voucherListPreview" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="9"/>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="py-[var(--pad-top-m)]">
+                            <view class="text-[28rpx] flex items-center">
+								<text class="font-500">补充描述</text>
+								<text class="text-[24rpx] text-[var(--text-color-light9)] ml-[10rpx]">选填</text>
+							</view>
+                            <view class="mt-[30rpx] h-[200rpx]">
+                                <textarea class="leading-[1.5] h-[100%] w-[100%] text-[28rpx]" v-model="formData.remark" cols="30" rows="5" placeholder="补充描述,有助于更好的处理售后问题" placeholder-class="text-[26rpx] text-[var(--text-color-light9)]"></textarea>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="w-full">
+						<view class="py-[var(--top-m)] px-[var(--sidebar-m)] box-border">
+							<button class="primary-btn-bg !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500" :loading="operateLoading" @click="save">提交</button>
+						</view>
+                    </view>
+
+                    <!-- 退款原因 -->
+                    <u-popup :show="refundCausePopup" @close="refundCausePopup = false">
+                        <view class="popup-common" @touchmove.prevent.stop>
+							<view class="title">退款原因</view>
+                            <scroll-view scroll-y="true" class="h-[450rpx] px-[30rpx] box-border">
+                                <u-radio-group v-model="currReasonName" placement="column" iconPlacement="right">
+                                    <u-radio activeColor="var(--primary-color)" :labelSize="'30rpx'" labelColor="#333" :customStyle="{marginBottom: '34rpx'}" v-for="(item, index) in reason" :key="index" :label="item" :name="item"></u-radio>
+                                </u-radio-group>
+                            </scroll-view>
+							<view class="btn-wrap">
+								<button class="primary-btn-bg btn" @click="refundCausePopupFn">确定</button>
+							</view>
+                        </view>
+                    </u-popup>
+                </scroll-view>
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+
+<script setup lang="ts">
+    import { ref, computed } from 'vue'
+    import { onLoad } from '@dcloudio/uni-app'
+    import { redirect, img, moneyFormat, goback } from '@/utils/common'
+    import { t } from '@/locale'
+    import { getShopOrderDetail } from '@/addon/shop/api/order'
+    import { getRefundReason, applyRefund,getRefundMoney } from '@/addon/shop/api/refund'
+    import { uploadImage } from '@/app/api/system'
+    import {useSubscribeMessage} from "@/hooks/useSubscribeMessage";
+
+    const detail = ref(null)
+	const orderDetail = ref({})
+    const orderGoodsId = ref(0)
+    const step = ref(0)
+	const refundCausePopup = ref(false)
+    const formData = ref({
+        order_id: detail.value?.order_id,
+        order_goods_id: orderGoodsId.value,
+        refund_type: '',
+        apply_money: '',
+        reason: '',
+        remark: '',
+        voucher: []
+    })
+    const refundMoney = ref<any>({})
+    const reason = ref<string[]>([])
+    const currReasonName = ref('')
+
+    getRefundReason().then(({ data }) => {
+        reason.value = data
+		if(reason.value && reason.value.length) currReasonName.value = reason.value[0];
+    })
+
+    onLoad((data) => {
+        orderGoodsId.value = data.order_goods_id || 0
+        formData.value.order_goods_id = orderGoodsId.value
+        formData.value.order_id = data.order_id || 0
+        if(data.order_id && data.order_goods_id){
+            getShopOrderDetail(data.order_id).then(({ data }) => {
+                detail.value = data
+                detail.value.order_goods.forEach((item,index)=>{
+                    if(orderGoodsId.value == item.order_goods_id){
+                        orderDetail.value = item;
+                    }
+                })
+                formData.value.apply_money = moneyFormat(refundMoney.value.refund_money)
+            })
+
+            // 获取可退款金额
+            getRefundMoney({order_goods_id: data.order_goods_id}).then(res =>{
+                refundMoney.value = res.data
+            })
+        }else{
+            let parameter = {
+				url:'/addon/shop/pages/order/list',
+				title: '缺少订单id'
+			};
+            goback(parameter);
+        }
+        
+    })
+
+    const inputWidth = computed((value) => {
+        return function (value) {
+            if (value == '' || value == 0) {
+                return '70rpx';
+            } else {
+                return String(value).length * 17 + 'rpx';
+            }
+        };
+    })
+
+    const selectRefundType = (type : number) => {
+        formData.value.refund_type = type
+        step.value = 1
+    }
+
+    const voucherListPreview = computed(() => {
+        return formData.value.voucher.map(item => {
+            return {url: img(item)}
+        })
+    })
+
+    const afterRead = (event: any) => {
+        event.file.forEach(item => {
+            uploadImage({
+                filePath: item.url,
+                name: 'file'
+            }).then(res => {
+                if (formData.value.voucher.length < 9 ) {
+                    formData.value.voucher.push(res.data.url)
+                }
+            })
+        })
+    }
+
+    const deletePic = (event: any)=> {
+        formData.value.voucher.splice(event.index, 1)
+    }
+
+    const operateLoading = ref(false)
+    const save = ()=> {
+
+		if(!formData.value.reason){
+			uni.showToast({
+				title: '请选择退款原因',
+				icon: 'none'
+			});
+			return false;
+		}
+
+		if((Number(formData.value.apply_money).toFixed(2)) < 0 ){
+            uni.showToast({
+                title: '退款金额不能为0,保留两位小数',
+                icon: 'none'
+            });
+            return false;
+		}
+
+		if(Number(formData.value.apply_money)>Number(refundMoney.value.refund_money)) {
+            uni.showToast({
+                title: '退款金额不能大于可退款总额',
+                icon: 'none'
+            });
+            return false;
+        }
+
+		if (operateLoading.value) return
+		operateLoading.value = true
+
+        useSubscribeMessage().request('shop_refund_agree,shop_refund_refuse')
+
+        applyRefund(formData.value).then((res) => {
+            operateLoading.value = false
+            setTimeout(()=> {
+                redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: formData.value.order_id } })
+            }, 1000)
+        }).catch(() => {
+            operateLoading.value = false
+        })
+    }
+
+	const refundCausePopupFn = ()=>{
+		formData.value.reason = currReasonName.value;
+		refundCausePopup.value = false;
+	}
+
+    const handleInput = (event:any) =>{
+       if(Number(event.detail.value) > Number(refundMoney.value.refund_money)){
+            uni.showToast({
+				title: '退款金额不能大于可退款总额',
+				icon: 'none'
+			});
+       }
+    }
+</script>
+<style lang="scss" scoped>
+    :deep(.u-upload__button) {
+        width: 70px !important;
+        height: 70px !important;
+        border: 1px dashed #ddd;
+		background-color: #fff;
+		border-radius: 20rpx !important;
+    }
+    :deep(.u-upload__wrap__preview__image) {
+        width: 70px!important;
+        height: 70px!important;
+    }
+</style>
diff --git a/src/addon/shop/pages/refund/detail.vue b/src/addon/shop/pages/refund/detail.vue
new file mode 100644
index 0000000..f72c8d4
--- /dev/null
+++ b/src/addon/shop/pages/refund/detail.vue
@@ -0,0 +1,369 @@
+<template>
+    <view :style="themeColor()">
+        <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
+            <view class="pb-[200rpx]" v-if="type != 'logistics'">
+                <view class="bg-linear">
+                    <!-- #ifdef MP-WEIXIN -->
+                    <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
+                    <!-- #endif -->
+                    <view v-if="detail.status_name" class="flex justify-between items-center pl-[40rpx] pr-[50rpx]  h-[280rpx] box-border pb-[90rpx]">
+                        <view class="text-[36rpx] font-500 leading-[42rpx] text-[#fff]">{{ detail.status_name }}</view>
+                        <view class="flex items-center">
+                            <image v-if="['1','2','4','6','7'].indexOf(detail.status) != -1" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/payment.png')" mode="aspectFit"/>
+                            <image v-if="['8'].indexOf(detail.status) != -1" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/complete.png')" mode="aspectFit" />
+                            <image v-if="['3','5','-1'].indexOf(detail.status) != -1" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/close.png')" mode="aspectFit" />
+                        </view>
+                    </view>
+                </view>
+                <view class="sidebar-margin card-template flex justify-between flex-wrap mt-[-76rpx]">
+                    <view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" @click="goodsEvent(detail.order_goods.goods_id)">
+                        <u--image radius="var(--goods-rounded-big)" width="150rpx" height="150rpx" :src="img(detail.order_goods.goods_image_thumb_small ? detail.order_goods.goods_image_thumb_small : '')" model="aspectFill">
+                            <template #error>
+                                <image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+                            </template>
+                        </u--image>
+                    </view>
+                    <view class="ml-[20rpx] flex flex-1 flex-col justify-between">
+                        <view>
+                            <view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx]">{{ detail.order_goods.goods_name }}</view>
+							<view class="text-[22rpx] mt-[10rpx] text-[var(--text-color-light9)] truncate max-w-[490rpx] leading-[28rpx]"  v-if="detail.order_goods.sku_name">{{ detail.order_goods.sku_name }}</view>
+                        </view>
+                        <view class="flex justify-between items-center leading-[28rpx] ">
+                            <view class="price-font">
+                                <text class="text-[24rpx]">￥</text>
+                                <text class="text-[40rpx] font-500">{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[0] }}</text>
+                                <text class="text-[24rpx] font-500">.{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[1] }}</text>
+                            </view>
+                            <text class="text-right text-[26rpx]">x{{ detail.order_goods.num }}</text>
+                        </view>
+                    </view>
+                </view>
+                <view class="sidebar-margin mt-[var(--top-m)] card-template">
+					<view class="justify-between text-[28rpx] card-template-item">
+					    <view>{{t('refundMoney')}}</view>
+						<view class="price-font text-[var(--price-text-color)]">
+							<text class="text-[24rpx] mr-[4rpx]">￥</text>
+							<text class="text-[28rpx]" v-if="detail.status == 8">{{ parseFloat(detail.money).toFixed(2) }}</text>
+                            <text class="text-[28rpx]" v-else>{{ parseFloat(detail.apply_money).toFixed(2) }}</text>
+						</view>
+					</view>
+                    <view class="justify-between text-[28rpx] card-template-item">
+                        <view>{{t('refundType')}}</view>
+                        <view>{{ detail.refund_type_name }}</view>
+                    </view>
+                    <view class="justify-between text-[28rpx] card-template-item">
+                        <view>{{t('refundCause')}}</view>
+                        <view class="w-[400rpx] multi-hidden text-right">{{ detail.reason || '--' }}</view>
+                    </view>
+                    <view class="justify-between text-[28rpx] card-template-item">
+                        <view>{{t('refundNo')}}</view>
+                        <view>{{ detail.order_refund_no }}</view>
+                    </view>
+                    <view class="justify-between text-[28rpx] card-template-item">
+                        <view>{{t('createTime')}}</view>
+                        <view>{{ detail.create_time }}</view>
+                    </view>
+                    <view class="justify-between text-[28rpx] card-template-item !items-baseline">
+                        <view>{{t('createExplain')}}</view>
+                        <view class="flex-1 ml-[60rpx] text-right leading-[1.5] flex justify-end break-all">{{ detail.remark }}</view>
+                    </view>
+                    <view class="justify-between text-[28rpx] card-template-item !items-baseline break-all" v-if="detail.shop_reason">
+                        <view>{{t('reasonRefusal')}}</view>
+                        <view class="flex-1 ml-[60rpx] leading-[1.5] text-right text-[#333]">{{ detail.shop_reason }}</view>
+                    </view>
+                </view>
+
+                <view class="sidebar-margin mt-[var(--top-m)] card-template">
+                    <view class="justify-between text-[28rpx] card-template-item">
+                        <view>{{t('record')}}</view>
+                        <view class="flex items-center" @click="redirect({url: '/addon/shop/pages/refund/log', param: { order_refund_no: orderRefundNo }})">
+                            <text class="text-[26rpx] text-[var(--text-color-light9)]">{{t('check')}}</text>
+                            <text class="nc-iconfont nc-icon-youV6xx text-[24rpx] text-[var(--text-color-light9)] pt-[2rpx]"></text>
+                        </view>
+                    </view>
+                </view>
+
+                <view class="flex tab-bar justify-between items-center bg-[#fff] fixed left-0 right-0 bottom-0 min-h-[100rpx] pl-[30rpx] pr-[20rpx] flex-wrap">
+                    <view class="flex">
+						<view class="flex mr-[20rpx] flex-col justify-center items-center" @click="redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })">
+						    <view class="nc-iconfont nc-icon-shouyeV6xx11 text-[36rpx]"></view>
+						    <text class="text-[20rpx] mt-[10rpx]">{{t('index')}}</text>
+						</view>
+						<!-- #ifdef MP-WEIXIN -->
+						<view>
+							<nc-contact
+									:send-message-title="sendMessageTitle"
+									:send-message-path="sendMessagePath"
+									:send-message-img="sendMessageImg">
+								<view class="flex flex-col justify-center items-center">
+									<text class="nc-iconfont nc-icon-kefuV6xx-1 text-[36rpx]"></text>
+									<text class="text-[20rpx] mt-[10rpx]">客服</text>
+								</view>
+							</nc-contact>
+						</view>
+						<!-- #endif -->
+					</view>
+
+                    <view class="flex justify-end">
+                        <view class="min-w-[180rpx] box-border text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] text-[#333] rounded-full ml-[20rpx]" @click="refundBtnFn('cancel')" v-if="['6','7','8','-1'].indexOf(detail.status) == -1">{{t('refundApply')}}</view>
+                        <view v-if="['3'].indexOf(detail.status) != -1" class="min-w-[180rpx] box-border text-[#333] text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] px-[20rpx]" @click.stop="refundBtnFn('edit')" >编辑退款信息</view>
+                        <view v-if="['2'].indexOf(detail.status) != -1" class="min-w-[180rpx] box-border text-[#333] text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] px-[20rpx]" @click.stop="refundBtnFn('logistics')">填写发货物流</view>
+                        <view v-if="['5'].indexOf(detail.status) != -1" class="min-w-[180rpx] box-border text-[#333] text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] px-[20rpx]" @click.stop="refundBtnFn('editLogistics')">编辑发货物流</view>
+                    </view>
+                </view>
+            </view>
+            <view v-else>
+                <view class="bg-linear">
+                    <!-- #ifdef MP-WEIXIN -->
+                    <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
+                    <!-- #endif -->
+                    <view class="flex justify-between items-center pl-[40rpx] pr-[50rpx]  h-[280rpx] box-border pb-[90rpx]">
+                        <view class="text-[36rpx] font-500 leading-[42rpx] text-[#fff]">{{ detail.status_name }}</view>
+                        <view class="flex items-center">
+                            <image class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/payment.png')" mode="aspectFit"/>
+                        </view>
+                    </view>
+                </view>
+                <view class="sidebar-margin card-template mt-[-79rpx] flex justify-between flex-wrap">
+                    <view class="w-[150rpx] h-[150rpx] flex-2" @click="goodsEvent(detail.order_goods.goods_id)">
+                        <u--image  radius="var(--goods-rounded-big)" width="150rpx" height="150rpx" :src="img(detail.order_goods.sku_image ? detail.order_goods.sku_image.split(',')[0] : '')" model="aspectFill">
+                            <template #error>
+                                <image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+                            </template>
+                        </u--image>
+                    </view>
+                    <view class="ml-[20rpx] flex flex-1 flex-col justify-between">
+                        <view>
+                            <view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx]">{{ detail.order_goods.goods_name }}</view>
+                            <view class="text-[24rpx] mt-[14rpx] text-[var(--text-color-light9)] truncate max-w-[490rpx] leading-[28rpx]" v-if="detail.order_goods.sku_name">
+                                {{ detail.order_goods.sku_name }}
+                            </view>
+                        </view>
+                        <view class="flex justify-between items-center leading-[28rpx]">
+                            <view class="price-font">
+                                <text class="text-[24rpx] font-500">￥</text>
+                                <text class="text-[40rpx] font-500">{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[0] }}</text>
+                                <text class="text-[24rpx] font-500">.{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[1] }}</text>
+                            </view>
+                            <text class="text-right text-[26rpx]">x{{ detail.order_goods.num }}</text>
+                        </view>
+                    </view>
+                </view>
+                <view class="sidebar-margin card-template top-mar">
+                    <view class="card-template-item justify-between text-[28rpx]">
+                        <view>联系人</view>
+                        <view>{{ detail.refund_address.contact_name }}</view>
+                    </view>
+                    <view class="card-template-item justify-between text-[28rpx]">
+                        <view>手机号</view>
+                        <view>{{ detail.refund_address.mobile }}</view>
+                    </view>
+                    <view class="card-template-item justify-between text-[28rpx]">
+                        <view>退货地址</view>
+                        <view class="w-[460rpx] text-sm text-right" v-if="detail.refund_address">{{ detail.refund_address.full_address || '--' }}</view>
+                    </view>
+                </view>
+                <view class="sidebar-margin card-template top-mar py-[var(--top-m)]">
+					<view class="title">物流信息</view>
+                    <u--form labelPosition="left" :model="formData" :rules="rules"  errorType='toast' ref="deliveryForm" labelWidth="140rpx" :labelStyle="{'fontSize': '28rpx'}">
+                        <u-form-item label="物流公司" prop="express_company" :borderBottom="false">
+                            <u--input border="none" v-model="formData.express_company" placeholder="请输入物流公司" placeholderClass="text-sm !text-[var(--text-color-light9)]" fontSize="28rpx" maxlength="50"></u--input>
+                        </u-form-item>
+						<view class="mt-[16rpx]">
+							<u-form-item label="物流单号" prop="express_number" :borderBottom="false">
+								<u--input border="none" placeholder="请输入物流单号" v-model="formData.express_number" placeholderClass="text-sm !text-[var(--text-color-light9)]" fontSize="28rpx" maxlength="100"></u--input>
+							</u-form-item>
+						</view>
+						<view class="mt-[16rpx]">
+							<u-form-item label="物流说明" :borderBottom="false">
+								<u--input border="none" placeholder="选填" v-model="formData.remark" placeholderClass="text-sm !text-[var(--text-color-light9)]" fontSize="28rpx" maxlength="100"></u--input>
+							</u-form-item>
+						</view>
+                    </u--form>
+                </view>
+                <view class="common-tab-bar-placeholder"></view>
+				<view class="common-tab-bar fixed left-[var(--sidebar-m)] right-[var(--sidebar-m)] bottom-[0]">
+                    <button class="mt-[80rpx] primary-btn-bg text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"   hover-class="none" @click="deliverySave">提交</button>
+                </view>
+            </view>
+            <logistics-tracking ref="materialRef"></logistics-tracking>
+            <u-modal :show="cancelRefundShow" confirmColor="var(--primary-color)" :content="t('cancelRefundContent')" :showCancelButton="true" :closeOnClickOverlay="true" @cancel="refundCancel" @confirm="refundConfirm"></u-modal>
+        </view>
+
+		<loading-page :loading="loading"></loading-page>
+
+        <!-- #ifdef MP-WEIXIN -->
+        <!-- 小程序隐私协议 -->
+        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+        <!-- #endif -->
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, nextTick } from 'vue';
+import { onLoad } from '@dcloudio/uni-app'
+import { t } from '@/locale'
+import { img, redirect, copy, goback } from '@/utils/common';
+import { topTabar } from '@/utils/topTabbar'
+import { getRefundDetail, refundDelivery, editRefundDelivery, closeRefund } from '@/addon/shop/api/refund';
+import logisticsTracking from '@/addon/shop/pages/order/components/logistics-tracking/logistics-tracking.vue'
+
+/********* 自定义头部 - start ***********/
+const topTabarObj = topTabar()
+let topTabbarData = topTabarObj.setTopTabbarParam({title:'退款详情'})
+/********* 自定义头部 - end ***********/
+
+const detail = ref<Object>({});
+const loading = ref<boolean>(true);
+const orderRefundNo = ref('');
+const type = ref('');
+const isEditDelivery = ref(false);
+
+const sendMessageTitle = ref('')
+const sendMessagePath = ref('')
+const sendMessageImg = ref('')
+// 物流信息
+const formData = ref({
+	express_number: '',
+	express_company: '',
+	remark: ''
+})
+
+// 物流验证
+const rules = computed(() => {
+	return {
+		'express_number': {
+			type: 'string',
+			required: true,
+			message: '请输入物流单号',
+			trigger: ['blur', 'change']
+		},
+		'express_company': {
+			type: 'string',
+			required: true,
+			message: '请输入物流公司',
+			trigger: ['blur', 'change']
+		},
+	}
+})
+
+const wxPrivacyPopupRef:any = ref(null)
+
+onLoad((option: any) => {
+    orderRefundNo.value = option.order_refund_no;
+    if(orderRefundNo.value){
+        type.value = option.type;
+        isEditDelivery.value = option.is_edit_delivery;
+
+        refundDetailFn(orderRefundNo.value);
+        // #ifdef MP
+        nextTick(()=>{
+            if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+        })
+        // #endif
+    }else{
+        let parameter = {
+            url:'/addon/shop/pages/refund/list',
+            title: '缺少订单号'
+        };
+        goback(parameter);
+    }
+});
+
+const refundDetailFn = (refundNo: any) => {
+	loading.value = true;
+	getRefundDetail(refundNo).then((res: any) => {
+		detail.value = res.data;
+		// 赋值物流信息
+		if(isEditDelivery.value && detail.value.delivery){
+			formData.value.express_number = detail.value.delivery.express_number
+			formData.value.express_company = detail.value.delivery.express_company
+			formData.value.remark = detail.value.delivery.remark
+		}
+
+		sendMessageTitle.value = detail.value.order_goods.goods_name
+		sendMessageImg.value = img(detail.value.order_goods.goods_image_thumb_small || '')
+		loading.value = false;
+	}).catch(() => {
+		loading.value = false;
+	})
+}
+
+const goodsEvent = (id: number) => {
+	redirect({
+		url: '/addon/shop/pages/goods/detail',
+		param: {
+			goods_id: id
+		}
+	})
+}
+
+// 提交物流信息
+const deliveryForm = ref()
+const deliverySave = ()=>{
+	deliveryForm.value.validate().then(res => {
+		let obj = {delivery: formData.value,order_refund_no: detail.value.order_refund_no}
+		let api = isEditDelivery.value ? editRefundDelivery(obj) : refundDelivery(obj);
+		api.then((res) => {
+			setTimeout(()=>{
+				redirect({ url: '/addon/shop/pages/refund/list' })
+			},500)
+		}).catch(() => {
+		})
+	})
+}
+
+const refundBtnFn = (type:any) => {
+    if(type == 'cancel'){
+        currRefundOn = detail.value.order_refund_no;
+        cancelRefundShow.value = true;
+    }else if(type == 'edit'){
+        redirect({ url: '/addon/shop/pages/refund/edit_apply', param: { order_refund_no : detail.value.order_refund_no } })
+    }else if(type == 'logistics'){
+        redirect({ url: '/addon/shop/pages/refund/detail', param: { order_refund_no : detail.value.order_refund_no, type: 'logistics' } })
+    }else if(type == 'editLogistics'){
+        redirect({ url: '/addon/shop/pages/refund/detail', param: { order_refund_no : detail.value.order_refund_no, type: 'logistics', is_edit_delivery: true } })
+    }
+}
+
+// 撤销维权
+const cancelRefundShow = ref(false);
+let currRefundOn = "";
+
+const refundConfirm = ()=>{
+    closeRefund(currRefundOn).then((res) => {
+        cancelRefundShow.value = false;
+        refundDetailFn(orderRefundNo.value);
+    }).catch(() => {
+        cancelRefundShow.value = false;
+    })
+}
+
+const refundCancel = ()=>{
+    cancelRefundShow.value = false;
+}
+
+</script>
+<style lang="scss" scoped>
+.text-item {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+.bg-linear {
+	background: linear-gradient( 94deg, #F84949 8%, #FF9A68 99%);
+}
+:deep(.u-form-item__body__left__content__label){
+		height: 40rpx !important;
+}
+:deep(.u-form-item__body){
+	padding: 0 !important;
+	height: 40rpx !important;
+}
+:deep(.u-form-item){
+	margin-bottom: 34rpx;
+}
+</style>
diff --git a/src/addon/shop/pages/refund/edit_apply.vue b/src/addon/shop/pages/refund/edit_apply.vue
new file mode 100644
index 0000000..de90bc6
--- /dev/null
+++ b/src/addon/shop/pages/refund/edit_apply.vue
@@ -0,0 +1,272 @@
+<template>
+    <view :style="themeColor()">
+        <swiper :indicator-dots="false" :autoplay="false" :disable-touch="true" :current="step" class="h-screen" :duration="300" v-if="detail">
+            <swiper-item>
+                <scroll-view scroll-y="true" class="bg-page min-h-screen overflow-hidden">
+                    <view class="m-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="flex">
+                            <u--image :radius="'var(--goods-rounded-small)'" width="120rpx" height="120rpx" :src="img(orderDetail.sku_image.split(',')[0])" model="aspectFill">
+                                <template #error>
+                                    <image class="w-[120rpx] h-[120rpx]" :radius="'var(--goods-rounded-small)'" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+                                </template>
+                            </u--image>
+                            <view class="flex-1 w-0 ml-[20rpx]">
+								<view class="text-ellipsis text-[28rpx] leading-normal truncate">{{orderDetail.goods_name}}</view>
+								<view v-if="orderDetail.sku_name" class="mt-[6rpx] text-[24rpx] leading-[1.3] text-[var(--text-color-light9)] truncate">{{ orderDetail.sku_name }}</view>
+                            </view>
+                        </view>
+                    </view>
+
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="py-[var(--pad-top-m)] flex items-center" @click="selectRefundType(1)">
+                            <view class="flex-1">
+                                <view class="text-[30rpx]">仅退款</view>
+                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]" v-if="orderDetail.goods_type == 'real'">未收到货，或与商家协商一致不用退货只退款</view>
+                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]" v-else-if="orderDetail.goods_type == 'virtual'">与商家协商一致不用退货只退款</view>
+                            </view>
+                            <text class="nc-iconfont nc-icon-youV6xx text-[28rpx] text-[var(--text-color-light9)]"></text>
+                        </view>
+                        <view class="py-[var(--pad-top-m)] flex items-center border-0 !border-t !border-[#f5f5f5] border-solid" v-if="orderDetail.goods_type == 'real' && (!orderDetail.delivery_status || orderDetail.delivery_status != 'wait_delivery')" @click="selectRefundType(2)">
+                            <view class="flex-1">
+                                <view class="text-[30rpx]">退货退款</view>
+                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]">已收到货，需退还收到的货物</view>
+                            </view>
+                            <text class="nc-iconfont nc-icon-youV6xx text-[28rpx] text-[var(--text-color-light9)]"></text>
+                        </view>
+                    </view>
+                </scroll-view>
+            </swiper-item>
+            <swiper-item>
+                <scroll-view scroll-y="true" class="bg-page min-h-screen overflow-hidden">
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="py-[var(--pad-top-m)] flex justify-between items-center">
+                            <view class="text-[28rpx]">退款原因</view>
+                            <view class="flex ml-[auto] items-center h-[30rpx]" @click="refundCausePopup = true">
+								<text class="text-[26rpx] text-[var(--text-color-light9)] truncate max-w-[460rpx]">{{ formData.reason || '请选择' }}</text>
+                                <text class="nc-iconfont nc-icon-youV6xx pt-[4rpx] text-[24rpx] text-[var(--text-color-light9)]"></text>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="py-[var(--pad-top-m)]">
+							<view class="flex items-center justify-between">
+								<view class="text-[28rpx] font-500">退款金额</view>
+								<view class="flex justify-end items-center text-[var(--price-text-color)] price-font">
+									<text class="font-500 text-[36rpx] leading-none">￥</text>
+									<text class="font-500 text-[36rpx] leading-none">{{ formData.apply_money }}</text>
+									<!-- <input type="digit" v-model.number="formData.apply_money" class="font-500 text-[36rpx] leading-none" :style="{ width: inputWidth(formData.apply_money) }" @blur="handleInput"> -->
+								</view>
+							</view>
+							<view class="text-right text-[24rpx] text-[var(--text-color-light9)] mt-[10rpx]">
+								<!-- <text>最多可退￥{{ refundMoney.refund_money }}</text> -->
+								<text v-if="refundMoney.is_refund_delivery === 1 && Number(refundMoney.refund_delivery_money) > 0" class="ml-[10rpx]">(包含运费￥{{ refundMoney.refund_delivery_money }})</text>
+							</view>
+                        </view>
+                    </view>
+                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
+                        <view class="pt-[var(--pad-top-m)] pb-[14rpx]">
+                            <view class="text-[28rpx] flex items-center">
+								<text class="font-500">上传凭证</text>
+								<text class="text-[24rpx] text-[var(--text-color-light9)] ml-[10rpx]">选填</text>
+							</view>
+                            <view class="mt-[30rpx]">
+                                <u-upload :fileList="voucherListPreview" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="9"/>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="my-[24rpx] sidebar-margin px-[24rpx] rounded-md bg-white">
+                        <view class="py-[var(--pad-top-m)]">
+							<view class="text-[28rpx] flex items-center">
+								<text class="font-500">补充描述</text>
+								<text class="text-[24rpx] text-[var(--text-color-light9)] ml-[10rpx]">选填</text>
+							</view>
+                            <view class="mt-[30rpx] h-[200rpx]">
+                                <textarea class="leading-[1.5] h-[100%] w-[100%] text-[28rpx]" v-model="formData.remark" cols="30" rows="5" placeholder="补充描述,有助于更好的处理售后问题" placeholder-class="text-[26rpx] text-[var(--text-color-light9)]"></textarea>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="w-full">
+                    	<view class="py-[var(--top-m)] px-[var(--sidebar-m)] box-border">
+                    		<button class="primary-btn-bg !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500" :loading="operateLoading" @click="save">提交</button>
+                    	</view>
+                    </view>
+                    
+                    <!-- 退款原因 -->
+                    <u-popup :show="refundCausePopup" @close="refundCausePopup = false" @open="open"  :closeable="true">
+                        <view class="popup-common" @touchmove.prevent.stop>
+                            <view class="title">退款原因</view>
+                            <scroll-view scroll-y="true" class="h-[450rpx] px-[30rpx] box-border">
+                                <u-radio-group v-model="currReasonName" placement="column" iconPlacement="right">
+                                    <u-radio activeColor="var(--primary-color)" :labelSize="'30rpx'" labelColor="#333" :customStyle="{marginBottom: '34rpx'}" v-for="(item, index) in reason" :key="index" :label="item" :name="item"></u-radio>
+                                </u-radio-group>
+                            </scroll-view>
+							<view class="btn-wrap">
+								<button class="primary-btn-bg btn" @click="refundCausePopupFn">确定</button>
+							</view>
+                        </view>
+                    </u-popup>
+                </scroll-view>
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+
+<script setup lang="ts">
+    import { ref, computed } from 'vue'
+    import { onLoad } from '@dcloudio/uni-app'
+    import { redirect, img, moneyFormat, goback } from '@/utils/common'
+    import { t } from '@/locale'
+    import { getRefundReason, editRefund, getRefundDetail,getRefundMoneyAgain } from '@/addon/shop/api/refund'
+    import { uploadImage } from '@/app/api/system'
+
+    const detail = ref(null)
+	const orderDetail = ref({})
+    const orderGoodsId = ref(0)
+    const step = ref(0)
+	const refundCausePopup = ref(false)
+    const formData = ref({
+        order_id: detail.value?.order_id,
+        order_goods_id: orderGoodsId.value,
+        order_refund_no:'',
+        refund_type: '',
+        apply_money: '',
+        reason: '',
+        remark: '',
+        voucher: []
+    })
+    const refundMoney = ref<any>({})
+    const reason = ref<string[]>([])
+    const currReasonName = ref('')
+
+	getRefundReason().then(({ data }) => {
+	    reason.value = data
+		if(reason.value && reason.value.length) currReasonName.value = reason.value[0];
+	})
+
+    onLoad((option: any) => {
+        orderGoodsId.value = option.order_goods_id || 0
+		if(option.order_refund_no){
+            getRefundDetail(option.order_refund_no).then(({ data }) => {
+                detail.value = data
+                orderDetail.value = data.order_goods;
+
+                // 初始化信息
+                formData.value.order_goods_id = data.order_goods_id;
+                formData.value.order_id = data.order_id;
+                formData.value.order_refund_no = data.order_refund_no;
+                formData.value.remark = data.remark;
+                formData.value.reason = data.reason;
+                currReasonName.value = data.reason;
+                formData.value.voucher = data.voucher;
+            })
+            getRefundMoneyAgain({order_refund_no: option.order_refund_no}).then(res =>{
+                refundMoney.value = res.data
+                formData.value.apply_money = moneyFormat(refundMoney.value.refund_money)
+            })
+        }else{
+            let parameter = {
+                url:'/addon/shop/pages/refund/list',
+                title: '缺少订单号'
+            };
+            goback(parameter);
+        }
+    })
+
+    const inputWidth = computed((value) => {
+        return function (value) {
+            if (value == '' || value == 0) {
+                return '70rpx';
+            } else {
+                return String(value).length * 17 + 'rpx';
+            }
+        };
+    })
+
+    const selectRefundType = (type : number) => {
+        formData.value.refund_type = type
+        step.value = 1
+    }
+
+    const voucherListPreview = computed(() => {
+        return formData.value.voucher.map(item => {
+            return {url: img(item)}
+        })
+    })
+
+    const afterRead = (event) => {
+        event.file.forEach(item => {
+            uploadImage({
+                filePath: item.url,
+                name: 'file'
+            }).then(res => {
+                if (formData.value.voucher.length < 9 ) {
+                    formData.value.voucher.push(res.data.url)
+                }
+            }).catch(() => {
+            })
+        })
+    }
+
+    const deletePic = (event)=> {
+        formData.value.voucher.splice(event.index, 1)
+    }
+
+    const operateLoading = ref(false)
+    const save = ()=> {
+        if (!formData.value.reason) {
+            uni.showToast({
+                title: '请选择退款原因',
+                icon: 'none'
+            });
+            return false;
+        }
+
+        if ((Number(formData.value.apply_money).toFixed(2)) < 0) {
+            uni.showToast({
+                title: '退款金额不能为0,保留两位小数',
+                icon: 'none'
+            });
+            return false;
+        }
+
+        if (Number(formData.value.apply_money) > Number(refundMoney.value.refund_money)) {
+            uni.showToast({
+                title: '退款金额不能大于可退款总额',
+                icon: 'none'
+            });
+            return false;
+        }
+
+        if (operateLoading.value) return
+        operateLoading.value = true
+
+        editRefund(formData.value).then((res) => {
+            operateLoading.value = false
+            setTimeout(() => {
+                redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: formData.value.order_id } })
+            }, 1000)
+        }).catch(() => {
+            operateLoading.value = false
+        })
+    }
+
+	const refundCausePopupFn = ()=>{
+		formData.value.reason = currReasonName.value;
+		refundCausePopup.value = false;
+	}
+</script>
+
+<style lang="scss" scoped>
+    :deep(.u-upload__button) {
+        width: 70px !important;
+        height: 70px !important;
+        border: 1px dashed #ddd;
+		background-color: #fff;
+    	border-radius: 20rpx !important;
+    }
+    :deep(.u-upload__wrap__preview__image) {
+        width: 70px!important;
+        height: 70px!important;
+    }
+   
+</style>
diff --git a/src/addon/shop/pages/refund/list.vue b/src/addon/shop/pages/refund/list.vue
new file mode 100644
index 0000000..6468b43
--- /dev/null
+++ b/src/addon/shop/pages/refund/list.vue
@@ -0,0 +1,163 @@
+<template>
+	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" :style="themeColor()">
+
+		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getRefundListFn">
+			<view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
+				<view class="mb-[var(--top-m)] card-template" v-for="(item,index) in list" :key="index">
+					<view @click="toLink(item)">
+						<view class="flex justify-between items-center">
+							<view class="text-[#303133] text-[26rpx] font-400 leading-[34rpx]">
+								<text>{{ t('orderNo') }}:</text>
+								<text class="ml-[10rpx]">{{ item.order_refund_no }}</text>
+								<text class="text-[#303133] text-[24rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]" @click.stop="copy(item.order_refund_no)"></text>
+							</view>
+							<view class="text-[26rpx] leading-[34rpx] !text-[var(--primary-color)]">{{item.refund_type_name}}</view>
+						</view>
+						<view class="flex mt-[20rpx]">
+							<u--image width="150rpx" height="150rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.order_goods.goods_image_thumb_small ? item.order_goods.goods_image_thumb_small : '')" model="aspectFill">
+								<template #error>
+									<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
+								</template>
+							</u--image>
+							<view class="ml-[20rpx] flex flex-1 flex-col box-border">
+								<view class="flex justify-between items-baseline">
+									<view class="text-[28rpx] leading-[40rpx] text-[#303133] max-w-[322rpx]  truncate font-400">{{ item.order_goods.goods_name }}</view>
+									<view class="text-right leading-[42rpx] ml-[10rpx]">
+										<text class="text-[22rpx] price-font">￥</text>
+										<text class="text-[36rpx] font-500 price-font">{{parseFloat(item.order_goods.price).toFixed(2).split('.')[0] }}</text>
+										<text class="text-[22rpx] font-500 price-font">.{{parseFloat(item.order_goods.price).toFixed(2).split('.')[1] }}</text>
+									</view>
+								</view>
+								<view class="flex justify-between items-baseline mt-[14rpx]">
+									<view class="flex flex-col">
+										<view class="text-[26rpx] truncate text-[var(--text-color-light6)] leading-[36rpx] max-w-[369rpx] mb-[10rpx]" v-if="item.order_goods.sku_name">{{ item.order_goods.sku_name }}</view>
+										<view class="text-[26rpx] font-400 leading-[36rpx] text-[var(--text-color-light6)]">退款状态：{{ item.status_name }}</view>
+									</view>
+									<text class="text-right text-[26rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ item.order_goods.num }}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="flex justify-end items-baseline mt-[20rpx]">
+						<view class="flex items-center">
+							<text class="text-[22rpx] leading-[30rpx] font-400 mr-[4rpx]">{{ t('refundMoney') }}：</text>
+							<view class="price-font leading-[42rpx] text-[var(--price-text-color)]">
+								<text class="text-[22rpx]">￥</text>
+								<template v-if="item.status == 8">
+									<text class="text-[36rpx] font-500">{{ parseFloat(item.money).toFixed(2).split('.')[0] }}</text>
+									<text class="text-[22rpx] font-500">.{{ parseFloat(item.money).toFixed(2).split('.')[1] }}</text>
+								</template>
+								<template v-else>
+									<text class="text-[36rpx] font-500">{{ parseFloat(item.apply_money).toFixed(2).split('.')[0] }}</text>
+									<text class="text-[22rpx] font-500">.{{ parseFloat(item.apply_money).toFixed(2).split('.')[1] }}</text>
+								</template>
+							</view>
+						</view>
+					</view>
+					<view class="mt-[20rpx] flex flex-wrap justify-end" v-if="['6','7','8','-1','3','2','5'].indexOf(item.status) == -1">
+						<view class="text-[24rpx] text-[var(--text-color-light6)] font-500 h-[56rpx] leading-[52rpx] box-border px-[23rpx] border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full ml-[20rpx]" @click.stop="refundBtnFn(item,'cancel')" v-if="['6','7','8','-1'].indexOf(item.status) == -1">{{t('refundApply')}}</view>
+						<view v-if="['3'].indexOf(item.status) != -1" class="text-[24rpx] font-500 text-[var(--text-color-light6)] h-[56rpx] box-border leading-[52rpx] px-[23rpx] border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full ml-[20rpx]" @click.stop="refundBtnFn(item,'edit')" >编辑退款信息</view>
+						<view v-if="['2'].indexOf(item.status) != -1" class=" text-[24rpx] font-500 text-[var(--text-color-light6)] h-[56rpx] box-border leading-[52rpx] px-[23rpx] border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full ml-[20rpx]" @click.stop="refundBtnFn(item,'logistics')">填写发货物流</view>
+						<view v-if="['5'].indexOf(item.status) != -1" class="text-[24rpx] font-500 text-[var(--text-color-light6)] h-[56rpx] box-border  leading-[52rpx] px-[23rpx] border-[2rpx] border-solid border-[var(--text-color-light9)] rounded-full ml-[20rpx]" @click.stop="refundBtnFn(item,'editLogistics')">编辑发货物流</view>
+					</view>
+				</view>
+			</view>
+			<mescroll-empty :option="{tip : '暂无订单'}" v-if="!list.length && loading"></mescroll-empty>
+			
+		</mescroll-body>
+		<u-modal :show="cancelRefundShow" confirmColor="var(--primary-color)" :content="t('cancelRefundContent')" :showCancelButton="true" :closeOnClickOverlay="true" @cancel="refundCancel" @confirm="refundConfirm"></u-modal>
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref,nextTick } from 'vue';
+	import { t } from '@/locale'
+	import { img, redirect,copy } from '@/utils/common'
+	import { getRefundList, closeRefund } from '@/addon/shop/api/refund';
+	import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
+	import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
+	import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
+	import { onLoad,onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+
+	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+	const list = ref<Array<Object>>([]);
+	const loading = ref<boolean>(false);
+	const cancelRefundShow = ref(false);
+
+	const wxPrivacyPopupRef:any = ref(null)
+
+	onLoad(()=>{
+		// #ifdef MP
+		nextTick(()=>{
+			if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
+		})
+		// #endif
+	})
+
+	const getRefundListFn = (mescroll) => {
+		loading.value = false;
+		let data : object = {
+			page: mescroll.num,
+			limit: mescroll.size
+		};
+
+		getRefundList(data).then((res) => {
+			let newArr = (res.data.data as Array<Object>);
+			//设置列表数据
+			if (mescroll.num == 1) {
+				list.value = []; //如果是第一页需手动制空列表
+			}
+			list.value = list.value.concat(newArr);
+			mescroll.endSuccess(newArr.length);
+			loading.value = true;
+		}).catch(() => {
+			loading.value = true;
+			mescroll.endErr(); // 请求失败, 结束加载
+		})
+	}
+
+	const toLink = (data) => {
+		redirect({ url: '/addon/shop/pages/refund/detail', param: { order_refund_no : data.order_refund_no } })
+	}
+
+	let currRefundOn = "";
+	const refundBtnFn = (data, type) => {
+		if(type == 'cancel'){
+			currRefundOn = data.order_refund_no;
+			cancelRefundShow.value = true;
+		}else if(type == 'edit'){
+			redirect({ url: '/addon/shop/pages/refund/edit_apply', param: { order_refund_no : data.order_refund_no } })
+		}else if(type == 'logistics'){
+			redirect({ url: '/addon/shop/pages/refund/detail', param: { order_refund_no : data.order_refund_no, type: 'logistics' } })
+		}else if(type == 'editLogistics'){
+			redirect({ url: '/addon/shop/pages/refund/detail', param: { order_refund_no : data.order_refund_no, type: 'logistics', is_edit_delivery: true } })
+		}
+	}
+
+	const refundConfirm = ()=>{
+		closeRefund(currRefundOn).then((res) => {
+			cancelRefundShow.value = false;
+			getMescroll().resetUpScroll();
+		}).catch(() => {
+			cancelRefundShow.value = false;
+		})
+	}
+
+	const refundCancel = ()=>{
+		cancelRefundShow.value = false;
+	}
+
+</script>
+<style lang="scss" scoped>
+	.text-item {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+</style>
diff --git a/src/addon/shop/pages/refund/log.vue b/src/addon/shop/pages/refund/log.vue
new file mode 100644
index 0000000..86f5c5a
--- /dev/null
+++ b/src/addon/shop/pages/refund/log.vue
@@ -0,0 +1,61 @@
+<template>
+    <view :style="themeColor()">
+        <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
+			<view class="pt-[var(--top-m)]">
+				<view class="card-template sidebar-margin mb-[var(--top-m)]" v-for="(item,index) in detail.refund_log">
+					<view class="text-[28rpx]">{{item.type_name || '--'}}</view>
+					<view class="text-[24rpx] mt-[20rpx] mb-[10rpx] text-[var(--text-color-light9)]">{{item.main_type_name}} {{item.main_name}}</view>
+					<view class="text-[24rpx] text-[var(--text-color-light9)]">{{item.create_time}}</view>
+				</view>
+				<view class="w-full footer">
+					<view class="py-[var(--top-m)] px-[var(--sidebar-m)] footer w-full fixed bottom-0 left-0 right-0 box-border">
+						<button class="primary-btn-bg text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] mx-0 flex-1 font-500" @click="redirect({url: '/addon/shop/pages/refund/detail', param: { order_refund_no: orderRefundNo }})">返回详情</button>
+					</view>
+				</view>
+			</view>
+        </view>
+
+		<loading-page :loading="loading"></loading-page>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
+import { onLoad } from '@dcloudio/uni-app'
+import { t } from '@/locale'
+import { img, redirect, goback } from '@/utils/common';
+import { getRefundDetail } from '@/addon/shop/api/refund';
+
+const detail = ref<Object>({});
+const loading = ref<boolean>(true);
+const orderRefundNo = ref('')
+
+onLoad((option: any) => {
+    orderRefundNo.value = option.order_refund_no;
+    if(option.order_refund_no){
+        refundDetailFn(option.order_refund_no);
+    }else{
+        let parameter = {
+            url:'/addon/shop/pages/refund/list',
+            title: '缺少订单号'
+        };
+        goback(parameter);
+    }
+});
+
+const refundDetailFn = (refundNo: any) => {
+	loading.value = true;
+	getRefundDetail(refundNo).then((res: any) => {
+		detail.value = res.data;
+		loading.value = false;
+	}).catch(() => {
+		loading.value = false;
+	})
+}
+</script>
+<style lang="scss" scoped>
+.footer{
+	height: calc(80rpx + var(--top-m) + var(--top-m) + constant(safe-area-inset-bottom)) !important;
+	height: calc(80rpx + var(--top-m) + var(--top-m) + env(safe-area-inset-bottom)) !important;
+}
+</style>
diff --git a/src/addon/shop/stores/cart.ts b/src/addon/shop/stores/cart.ts
new file mode 100644
index 0000000..2ebe2cf
--- /dev/null
+++ b/src/addon/shop/stores/cart.ts
@@ -0,0 +1,209 @@
+import { defineStore } from 'pinia'
+import { t } from '@/locale'
+import { redirect, getToken } from '@/utils/common'
+import { addCart, editCart, deleteCart, clearCart, getCartList, getCartSum } from '@/addon/shop/api/cart';
+
+interface Cart {
+    cartList: AnyObject
+    totalNum: number
+    totalMoney: number
+    isRepeat: boolean
+}
+
+const useCartStore = defineStore('cart', {
+    state: (): Cart => {
+        return {
+            cartList: {}, // 购物车列表
+            totalNum: 0, // 购物车商品总数量
+            totalMoney: 0, // 购物车商品总价格
+            isRepeat: false
+        }
+    },
+    actions: {
+        // 查询购物车列表
+        getList(callback: any = null) {
+            if (!getToken()) {
+                // 每次查询清空
+                for (let k in this.cartList) {
+                    delete this.cartList[k];
+                }
+                this.totalNum = 0;
+                this.totalMoney = 0;
+                return;
+            }
+            getCartList({}).then((res: any) => {
+                let data = res.data;
+
+                // 每次查询清空
+                for (let k in this.cartList) {
+                    delete this.cartList[k];
+                }
+                if (data) {
+                    data.forEach((item: any) => {
+                        if (item.goods.status == 1 && item.goods.delete_time == 0 && item.goodsSku) {
+                            let cart: any = {
+                                id: item.id,
+                                goods_id: item.goods_id,
+                                sku_id: item.sku_id,
+                                stock: item.goodsSku.stock,
+                                num: item.num,
+                                sale_price: item.goodsSku.price
+                            };
+
+                            if (item.goods.member_discount && getToken() && item.goodsSku.member_price != item.goodsSku.price) {
+                                cart.sale_price = item.goodsSku.member_price ? item.goodsSku.member_price : item.goodsSku.price // 会员价
+                            }
+
+                            // todo sale_price 改成 price
+
+                            if (!this.cartList['goods_' + cart.goods_id]) {
+                                this.cartList['goods_' + cart.goods_id] = {};
+                            }
+                            this.cartList['goods_' + cart.goods_id]['sku_' + cart.sku_id] = cart;
+                        }
+                    })
+                }
+                this.calculateNum();
+                if (callback && typeof callback == 'function') callback();
+            })
+        },
+        /**
+         * 购物车数量增加
+         * data：数据源
+         * step：记步数量，默认为：1，每次加一个，设置为：0时，按照 num 修改
+         */
+        increase(data: any, step = 1, callback: any = null) {
+            if (!data || (data && Object.keys(data).length == 0) || !data.goods_id || !data.sku_id) return;
+            if (!getToken()) return;
+
+            let num = data.num || 0; // 当前数量
+            let updateNum = num + step; // 变更数量
+
+            let api = data.id ? editCart : addCart;
+
+            if (updateNum > parseInt(data.stock)) {
+                uni.showToast({ title: '商品库存不足', icon: 'none' })
+                return;
+            }
+
+            if (this.isRepeat) return;
+            this.isRepeat = true;
+
+            // 更新存储数据
+            if (data.id) {
+                this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id].num = updateNum;
+            } else {
+
+                // 如果商品第一次添加，则初始化数据
+                if (!this.cartList['goods_' + data.goods_id]) {
+                    this.cartList['goods_' + data.goods_id] = {};
+                }
+                this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id] = {
+                    id: data.id,
+                    goods_id: data.goods_id,
+                    sku_id: data.sku_id,
+                    stock: data.stock,
+                    num: updateNum,
+                    sale_price: data.sale_price
+                };
+            }
+
+            this.calculateNum();
+
+            api({
+                id: data.id,
+                goods_id: data.goods_id,
+                sku_id: data.sku_id,
+                num: updateNum
+            }).then(res => {
+                this.getList(callback)
+                this.isRepeat = false;
+            }).catch(res => {
+                this.isRepeat = false;
+            })
+
+        },
+        /**
+         * 购物车数量减少
+         * data：数据源
+         * step：记步数量，默认为：1，每次减一个，设置为：0时，按照 num 修改
+         */
+        reduce(data: any, step = 1, callback: any = null) {
+            if (!data || (data && Object.keys(data).length == 0) || !data.goods_id || !data.sku_id) return;
+            if (!getToken()) return;
+
+            let num = data.num || 0; // 当前数量
+            let updateNum = num - step; // 变更数量
+
+            let api = updateNum > 0 ? editCart : deleteCart;
+
+            if (this.isRepeat) return;
+            this.isRepeat = true;
+
+            // 更新存储数据
+            if (updateNum > 0) {
+                this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id].num = updateNum;
+            } else {
+                delete this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id];
+                if (Object.keys(this.cartList['goods_' + data.goods_id]).length == 0) delete this.cartList['goods_' + data.goods_id];
+            }
+
+            this.calculateNum();
+
+            api({
+                ids: data.id, // 删除接口用
+                id: data.id,
+                goods_id: data.goods_id,
+                sku_id: data.sku_id,
+                num: updateNum
+            }).then(res => {
+                this.getList(callback);
+                this.isRepeat = false;
+            }).catch(res => {
+                this.isRepeat = false;
+            })
+        },
+        // 购物车删除
+        delete(ids: any, callback: any = null) {
+            if (!ids) return;
+
+            deleteCart({
+                ids
+            }).then(res => {
+                this.getList();
+                this.isRepeat = false;
+                if (callback) callback();
+            }).catch(res => {
+                this.isRepeat = false;
+            })
+        },
+
+        // 计算购物车商品的总数量、总价格
+        calculateNum() {
+            this.totalNum = 0;
+            this.totalMoney = 0;
+
+            if (Object.keys(this.cartList).length) {
+                for (let goods in this.cartList) {
+                    let totalNum = 0;
+                    let totalMoney = 0;
+                    for (let sku in this.cartList[goods]) {
+                        if (typeof this.cartList[goods][sku] == 'object') {
+                            totalNum += this.cartList[goods][sku].num;
+                            totalMoney += this.cartList[goods][sku].num * this.cartList[goods][sku].sale_price;
+                        }
+                    }
+                    this.cartList[goods].totalNum = totalNum;
+                    this.cartList[goods].totalMoney = totalMoney.toFixed(2);
+
+                    this.totalNum += totalNum;
+                    this.totalMoney += totalMoney;
+
+                }
+            }
+            this.totalMoney = this.totalMoney.toFixed(2);
+        }
+    }
+})
+
+export default useCartStore
diff --git a/src/addon/shop/styles/common.scss b/src/addon/shop/styles/common.scss
new file mode 100644
index 0000000..e318b47
--- /dev/null
+++ b/src/addon/shop/styles/common.scss
@@ -0,0 +1,66 @@
+.remove-border {
+  &::after {
+    border: none;
+  }
+}
+
+
+/******************** 商品列表 state **********************/
+.brand-tag{
+	position: relative;
+	top: -2rpx;
+	display: inline;
+	line-height: 38rpx;
+	padding: 4rpx 8rpx;
+	border-radius: 4rpx;
+	margin-right: 8rpx;
+	background: red;
+	vertical-align: middle;
+	font-size: 18rpx;
+	color: #fff;
+	&.middle{
+		padding: 4rpx 8rpx;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		margin-right: 6rpx;
+	}
+}
+
+.base-tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 34rpx;
+    font-size: 18rpx;
+    padding: 0 8rpx;
+    color: #333;
+    border-radius: 4rpx;
+    background-color: #fff;
+    margin-right: 8rpx;
+    box-sizing: border-box;
+	margin-top: 8rpx;
+	border: 2rpx solid transparent;
+	&.middle{
+	    height: 40rpx;
+		padding: 0 12rpx;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		margin-right: 16rpx;
+	}
+}
+
+.img-tag {
+    display: block;
+    height: 34rpx;
+	width: auto;
+    border-radius: 4rpx;
+    margin-right: 14rpx;
+    box-sizing: border-box;
+	margin-top: 8rpx;
+	&.middle{
+	    height: 38rpx;
+	    border-radius: 8rpx;
+	    margin-right: 16rpx;
+	}
+}
+/******************** 商品列表 end **********************/
diff --git a/src/addon/shop/utils/map/openMap.js b/src/addon/shop/utils/map/openMap.js
new file mode 100644
index 0000000..901449e
--- /dev/null
+++ b/src/addon/shop/utils/map/openMap.js
@@ -0,0 +1,109 @@
+import TransformCoordinate from './transformCoordinate.js'
+import useConfigStore from "@/stores/config";
+
+function openMapByDefault(latitude, longitude, name) {
+	uni.openLocation({
+		latitude: latitude,
+		longitude: longitude,
+		name: name,
+		fail: (e) => {
+			uni.showModal({
+				content: '打开地图失败，请稍后重试',
+				confirmColor: useConfigStore().themeColor['--primary-color'],
+			})
+		},
+	})
+}
+
+function openMapByAndroid(latitude, longitude, name) {
+	let url = ''; // 回调地址
+	let identity = ''; // 程序名称
+	if (plus.runtime.isApplicationExist({
+			pname: 'com.baidu.BaiduMap'
+		})) { // baidumap
+		url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
+		identity = 'com.baidu.BaiduMap'
+		openURL(url, identity)
+	} else if (plus.runtime.isApplicationExist({
+			pname: 'com.autonavi.minimap'
+		})) { // 高德
+		url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
+		identity = 'com.autonavi.minimap'
+		openURL(url, identity)
+	} else {
+		openMapByDefault(latitude, longitude, name)
+	}
+}
+
+function openMapByIos(latitude, longitude, name) {
+	let url = ''; // 回调地址
+	let errorCB = ''; // url失败的回调地址
+	let identity = ''; // 程序名称
+
+	if (plus.runtime.isApplicationExist({
+			action: 'baidumap://'
+		})) { // baidumap
+		url =
+			`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
+		openURL(url, identity)
+	} else if (plus.runtime.isApplicationExist({
+			action: 'iosamap://'
+		})) { // 高德
+		url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
+		openURL(url, identity)
+	} else {
+		openMapByDefault(latitude, longitude, name)
+	}
+}
+
+function openURL(url, identity) {
+	let newurl = encodeURI(url);
+	plus.runtime.openURL(newurl, function(res) {
+		uni.showModal({
+			content: res.message,
+			confirmColor: useConfigStore().themeColor['--primary-color'],
+		})
+	}, identity);
+}
+
+function getCoordByType(longitude, latitude, coord_type) {
+	switch (coord_type) {
+		case 'gcj02':
+			return [longitude, latitude]
+			break;
+		case 'bd09':
+			return TransformCoordinate.bd09togcj02(longitude, latitude)
+			break;
+		case 'wgs84':
+			return TransformCoordinate.wgs84togcj02(longitude, latitude)
+			break;
+		default:
+			return [longitude, latitude]
+			break;
+	}
+}
+export default {
+	/* 打开地图 */
+	openMap(latitude, longitude, name, coord_type = 'gcj02') {
+		let arr = getCoordByType(longitude, latitude, coord_type)
+		// #ifdef APP-PLUS
+		switch (uni.getSystemInfoSync().platform) {
+			case 'android':
+				// console.log('运行Android上')
+				openMapByAndroid(arr[1], arr[0], name)
+				break;
+			case 'ios':
+				// console.log('运行iOS上')
+				openMapByIos(arr[1], arr[0], name)
+				break;
+			default:
+				openMapByDefault(arr[1], arr[0], name)
+				// console.log('运行在开发者工具上')
+				break;
+		}
+		// #endif
+		// #ifndef APP-PLUS
+		openMapByDefault(arr[1], arr[0], name)
+		// #endif
+	}
+}
diff --git a/src/addon/shop/utils/map/transformCoordinate.js b/src/addon/shop/utils/map/transformCoordinate.js
new file mode 100644
index 0000000..0dec3d4
--- /dev/null
+++ b/src/addon/shop/utils/map/transformCoordinate.js
@@ -0,0 +1,124 @@
+/**
+ * Created by Wandergis on 2015/7/8.
+ * 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
+ */
+
+//定义一些常量
+var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
+var PI = 3.1415926535897932384626;
+var a = 6378245.0;
+var ee = 0.00669342162296594323;
+
+/**
+ * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
+ * 即 百度 转 谷歌、高德
+ * @param bd_lon
+ * @param bd_lat
+ * @returns {*[]}
+ */
+function bd09togcj02(bd_lon, bd_lat) {
+	var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+	var x = bd_lon - 0.0065;
+	var y = bd_lat - 0.006;
+	var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+	var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+	var gg_lng = z * Math.cos(theta);
+	var gg_lat = z * Math.sin(theta);
+	return [gg_lng, gg_lat]
+}
+
+/**
+ * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
+ * 即谷歌、高德 转 百度
+ * @param lng
+ * @param lat
+ * @returns {*[]}
+ */
+function gcj02tobd09(lng, lat) {
+	var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
+	var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
+	var bd_lng = z * Math.cos(theta) + 0.0065;
+	var bd_lat = z * Math.sin(theta) + 0.006;
+	return [bd_lng, bd_lat]
+}
+
+/**
+ * WGS84转GCj02
+ * @param lng
+ * @param lat
+ * @returns {*[]}
+ */
+function wgs84togcj02(lng, lat) {
+	if (out_of_china(lng, lat)) {
+		return [lng, lat]
+	} else {
+		var dlat = transformlat(lng - 105.0, lat - 35.0);
+		var dlng = transformlng(lng - 105.0, lat - 35.0);
+		var radlat = lat / 180.0 * PI;
+		var magic = Math.sin(radlat);
+		magic = 1 - ee * magic * magic;
+		var sqrtmagic = Math.sqrt(magic);
+		dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
+		dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
+		var mglat = lat + dlat;
+		var mglng = lng + dlng;
+		return [mglng, mglat]
+	}
+}
+
+/**
+ * GCJ02 转换为 WGS84
+ * @param lng
+ * @param lat
+ * @returns {*[]}
+ */
+function gcj02towgs84(lng, lat) {
+	if (out_of_china(lng, lat)) {
+		return [lng, lat]
+	} else {
+		var dlat = transformlat(lng - 105.0, lat - 35.0);
+		var dlng = transformlng(lng - 105.0, lat - 35.0);
+		var radlat = lat / 180.0 * PI;
+		var magic = Math.sin(radlat);
+		magic = 1 - ee * magic * magic;
+		var sqrtmagic = Math.sqrt(magic);
+		dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
+		dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
+		mglat = lat + dlat;
+		mglng = lng + dlng;
+		return [lng * 2 - mglng, lat * 2 - mglat]
+	}
+}
+
+function transformlat(lng, lat) {
+	var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
+	ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
+	ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
+	ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
+	return ret
+}
+
+function transformlng(lng, lat) {
+	var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
+	ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
+	ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
+	ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
+	return ret
+}
+
+/**
+ * 判断是否在国内，不在国内则不做偏移
+ * @param lng
+ * @param lat
+ * @returns {boolean}
+ */
+function out_of_china(lng, lat) {
+	return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
+}
+
+export default {
+	bd09togcj02: bd09togcj02, // 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
+	gcj02tobd09: gcj02tobd09, // 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
+	wgs84togcj02: wgs84togcj02, // 
+	gcj02towgs84: gcj02towgs84,
+}
diff --git a/src/addon/shop/utils/theme.json b/src/addon/shop/utils/theme.json
new file mode 100644
index 0000000..ceb8e0d
--- /dev/null
+++ b/src/addon/shop/utils/theme.json
@@ -0,0 +1,10 @@
+{
+  "--primary-color": "#FF4142",
+  "--primary-help-color": "#FB7939",
+  "--primary-color-dark": "#F26F3E",
+  "--primary-color-disabled": "#FFB397",
+  "--primary-color-light": "#FFEAEA",
+  "--primary-color-light2": "rgba(255,65,66,.04)",
+  "--page-bg-color": "#f6f6f6",
+  "--price-text-color": "#FF4142"
+}
diff --git a/src/addon/sitecopy/locale/en.json b/src/addon/sitecopy/locale/en.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/src/addon/sitecopy/locale/en.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/addon/sitecopy/locale/zh-Hans.json b/src/addon/sitecopy/locale/zh-Hans.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/src/addon/sitecopy/locale/zh-Hans.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/addon/tk_devtool/locale/en.json b/src/addon/tk_devtool/locale/en.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/src/addon/tk_devtool/locale/en.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/addon/tk_devtool/locale/zh-Hans.json b/src/addon/tk_devtool/locale/zh-Hans.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/src/addon/tk_devtool/locale/zh-Hans.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/addon/tk_upgrade/locale/en.json b/src/addon/tk_upgrade/locale/en.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/src/addon/tk_upgrade/locale/en.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/addon/tk_upgrade/locale/zh-Hans.json b/src/addon/tk_upgrade/locale/zh-Hans.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/src/addon/tk_upgrade/locale/zh-Hans.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file