发布v1.0.3
This commit is contained in:
kele
@@ -0,0 +1,14 @@
|
||||
# 正式环境接口域名
|
||||
SHOPRO_BASE_URL = https://api.shopro.sheepjs.com
|
||||
|
||||
# 开发环境接口域名
|
||||
SHOPRO_DEV_BASE_URL = https://dev.shopro.sheepjs.com
|
||||
|
||||
# 开发环境运行端口
|
||||
SHOPRO_DEV_PORT = 3000
|
||||
|
||||
# 接口地址前缀
|
||||
SHOPRO_API_PATH = /shop/api/
|
||||
|
||||
# 客户端静态资源地址 空=默认使用服务端指定的CDN资源地址前缀 | local=本地 | http(s)://xxx.xxx=自定义静态资源地址前缀
|
||||
SHOPRO_STATIC_URL =
|
||||
@@ -0,0 +1,9 @@
|
||||
/unpackage/*
|
||||
/node_modules/*
|
||||
/.idea/*
|
||||
deploy.sh
|
||||
/.hbuilderx/
|
||||
/.vscode/
|
||||
**/.DS_Store
|
||||
.env
|
||||
yarn.lock
|
||||
@@ -0,0 +1,7 @@
|
||||
/unpackage/*
|
||||
/node_modules/**
|
||||
/uni_modules/**
|
||||
/public/*
|
||||
/sheep/ui/su-parse/*
|
||||
**/*.svg
|
||||
**/*.sh
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"semi": true,
|
||||
"vueIndentScriptAndStyle": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"proseWrap": "never",
|
||||
"htmlWhitespaceSensitivity": "strict",
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import { onLaunch, onShow, onError } from '@dcloudio/uni-app';
|
||||
import { ShoproInit } from './sheep';
|
||||
|
||||
onLaunch(() => {
|
||||
// 隐藏原生导航栏 使用自定义底部导航
|
||||
uni.hideTabBar();
|
||||
|
||||
// 加载Shopro底层依赖
|
||||
ShoproInit();
|
||||
});
|
||||
|
||||
onError((err) => {
|
||||
console.log('AppOnError:', err);
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
// #ifdef APP-PLUS
|
||||
// 获取urlSchemes参数
|
||||
const args = plus.runtime.arguments;
|
||||
if (args) {
|
||||
}
|
||||
|
||||
// 获取剪贴板
|
||||
uni.getClipboardData({
|
||||
success: (res) => { },
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/sheep/scss/index.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"prompt" : "template"
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
||||
/>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import App from './App';
|
||||
import { createSSRApp } from 'vue';
|
||||
import { setupPinia } from './sheep/store';
|
||||
|
||||
|
||||
export function createApp() {
|
||||
|
||||
const app = createSSRApp(App);
|
||||
|
||||
setupPinia(app);
|
||||
|
||||
return {
|
||||
app,
|
||||
};
|
||||
}
|
||||
+224
@@ -0,0 +1,224 @@
|
||||
{
|
||||
"name" : "星品购",
|
||||
"appid" : "__UNI__082C0BA",
|
||||
"description" : "应用描述",
|
||||
"versionName" : "1.0.7",
|
||||
"versionCode" : 107,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"nvueLaunchMode" : "fast",
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"safearea" : {
|
||||
"bottom" : {
|
||||
"offset" : "none"
|
||||
}
|
||||
},
|
||||
"modules" : {
|
||||
"Payment" : {},
|
||||
"Share" : {},
|
||||
"VideoPlayer" : {},
|
||||
"OAuth" : {}
|
||||
},
|
||||
"distribute" : {
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_SMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
|
||||
],
|
||||
"minSdkVersion" : 21,
|
||||
"schemes" : "shopro"
|
||||
},
|
||||
"ios" : {
|
||||
"urlschemewhitelist" : [ "baidumap", "iosamap" ],
|
||||
"dSYMs" : false,
|
||||
"privacyDescription" : {
|
||||
"NSPhotoLibraryUsageDescription" : "需要同意访问您的相册选取图片才能完善该条目",
|
||||
"NSPhotoLibraryAddUsageDescription" : "需要同意访问您的相册才能保存该图片",
|
||||
"NSCameraUsageDescription" : "需要同意访问您的摄像头拍摄照片才能完善该条目",
|
||||
"NSUserTrackingUsageDescription" : "开启追踪并不会获取您在其它站点的隐私信息,该行为仅用于标识设备,保障服务安全和提升浏览体验"
|
||||
},
|
||||
"urltypes" : "shopro",
|
||||
"capabilities" : {
|
||||
"entitlements" : {
|
||||
"com.apple.developer.associated-domains" : [ "applinks:shopro.sheepjs.com" ]
|
||||
}
|
||||
},
|
||||
"idfa" : true
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"speech" : {
|
||||
"ifly" : {}
|
||||
},
|
||||
"ad" : {},
|
||||
"oauth" : {
|
||||
"apple" : {},
|
||||
"weixin" : {
|
||||
"appid" : "wxae7a0c156da9383b",
|
||||
"UniversalLinks" : "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
|
||||
}
|
||||
},
|
||||
"payment" : {
|
||||
"weixin" : {
|
||||
"__platform__" : [ "ios", "android" ],
|
||||
"appid" : "wxae7a0c156da9383b",
|
||||
"UniversalLinks" : "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
|
||||
},
|
||||
"alipay" : {
|
||||
"__platform__" : [ "ios", "android" ]
|
||||
}
|
||||
},
|
||||
"share" : {
|
||||
"weixin" : {
|
||||
"appid" : "wxae7a0c156da9383b",
|
||||
"UniversalLinks" : "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
|
||||
}
|
||||
}
|
||||
},
|
||||
"orientation" : [ "portrait-primary" ],
|
||||
"splashscreen" : {
|
||||
"androidStyle" : "common",
|
||||
"iosStyle" : "common",
|
||||
"useOriginalMsgbox" : true
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"quickapp" : {},
|
||||
"quickapp-native" : {
|
||||
"icon" : "/static/logo.png",
|
||||
"package" : "com.example.demo",
|
||||
"features" : [
|
||||
{
|
||||
"name" : "system.clipboard"
|
||||
}
|
||||
]
|
||||
},
|
||||
"quickapp-webview" : {
|
||||
"icon" : "/static/logo.png",
|
||||
"package" : "com.example.demo",
|
||||
"minPlatformVersion" : 1070,
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : 100
|
||||
},
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx43051b2afa4ed3d0",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"postcss" : true
|
||||
},
|
||||
"optimization" : {
|
||||
"subPackages" : true //开启小程序分包优化。
|
||||
},
|
||||
"lazyCodeLoading" : "requiredComponents",
|
||||
"usingComponents" : {},
|
||||
"permission" : {},
|
||||
"requiredPrivateInfos" : [ "chooseAddress" ]
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-jd" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"h5" : {
|
||||
"template" : "index.html",
|
||||
"router" : {
|
||||
"mode" : "hash",
|
||||
"base" : "./"
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"maps" : {}
|
||||
},
|
||||
"async" : {
|
||||
"timeout" : 20000
|
||||
},
|
||||
"title" : "星品购",
|
||||
"optimization" : {
|
||||
"treeShaking" : {
|
||||
"enable" : true
|
||||
}
|
||||
}
|
||||
},
|
||||
"vueVersion" : "3",
|
||||
"_spaceID" : "192b4892-5452-4e1d-9f09-eee1ece40639",
|
||||
"locale" : "zh-Hans",
|
||||
"fallbackLocale" : "zh-Hans"
|
||||
}
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
{
|
||||
"id": "shopro",
|
||||
"name": "shopro",
|
||||
"displayName": "星品购",
|
||||
"version": "1.0.1",
|
||||
"description": "Shopro-B2C商城，一套代码，同时发行到iOS、Android、H5、微信小程序多个平台，请使用手机扫码快速体验强大功能",
|
||||
"scripts": {
|
||||
"prettier": "prettier --write \"{pages,sheep}/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
|
||||
},
|
||||
"repository": "https://github.com/sheepjs/shop.git",
|
||||
"keywords": [
|
||||
"商城",
|
||||
"B2C",
|
||||
"shopro",
|
||||
"商城模板"
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/sheepjs/shop/issues"
|
||||
},
|
||||
"homepage": "https://github.com/dcloudio/hello-uniapp#readme",
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端页面模板",
|
||||
"uni-app前端项目模板"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "u",
|
||||
"aliyun": "u"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "u",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@hyoga/uni-socket.io": "^1.0.1",
|
||||
"dayjs": "^1.11.6",
|
||||
"lodash": "^4.17.21",
|
||||
"pinia": "^2.0.24",
|
||||
"pinia-plugin-persist-uni": "^1.2.0",
|
||||
"qs-canvas": "^1.0.11",
|
||||
"weixin-js-sdk": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^2.7.1",
|
||||
"vconsole": "^3.15.0"
|
||||
}
|
||||
}
|
||||
+753
@@ -0,0 +1,753 @@
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^s-(.*)": "@/sheep/components/s-$1/s-$1.vue",
|
||||
"^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"aliasPath": "/",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"enablePullDownRefresh": true
|
||||
},
|
||||
"meta": {
|
||||
"auth": false,
|
||||
"sync": true,
|
||||
"title": "首页",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人中心",
|
||||
"enablePullDownRefresh": true
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "个人中心",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/category",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品分类"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "商品分类",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/cart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "购物车",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/search",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "搜索",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/page",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
},
|
||||
"meta": {
|
||||
"auth": false,
|
||||
"sync": true,
|
||||
"title": "自定义页面",
|
||||
"group": "商城"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "pages/goods",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "普通商品",
|
||||
"group": "商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "groupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拼团商品"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "拼团商品",
|
||||
"group": "商品"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "seckill",
|
||||
"style": {
|
||||
"navigationBarTitleText": "秒杀商品"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "秒杀商品",
|
||||
"group": "商品"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "score",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商品"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "积分商品",
|
||||
"group": "商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品列表"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "商品列表",
|
||||
"group": "商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "comment/add",
|
||||
"style": {
|
||||
"navigationBarTitleText": "评价商品"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "comment/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品评价"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/order",
|
||||
"pages": [
|
||||
{
|
||||
"path": "detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "confirm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "确认订单"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "确认订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"enablePullDownRefresh": true
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "用户订单",
|
||||
"group": "订单中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "invoice",
|
||||
"style": {
|
||||
"navigationBarTitleText": "发票详情"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "发票详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "aftersale/apply",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请售后"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "申请售后"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "aftersale/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "售后列表"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "售后订单",
|
||||
"group": "订单中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "aftersale/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "售后详情"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "售后详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "aftersale/log",
|
||||
"style": {
|
||||
"navigationBarTitleText": "售后进度"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "售后进度"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "express/log",
|
||||
"style": {
|
||||
"navigationBarTitleText": "物流轨迹"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "物流轨迹"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "express/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单包裹"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "订单包裹"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/user",
|
||||
"pages": [
|
||||
{
|
||||
"path": "info",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的信息"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "用户信息",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods-collect",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的收藏"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "商品收藏",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods-log",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的足迹"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "浏览记录",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "address/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收货地址"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "地址管理",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "address/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑地址"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "编辑地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "invoice/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "发票管理"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "发票管理",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "invoice/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑发票"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"title": "编辑发票"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "wallet/money",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的余额"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "用户余额",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "wallet/commission",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的佣金"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "用户佣金",
|
||||
"group": "分销中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "wallet/score",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的积分"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "用户积分",
|
||||
"group": "用户中心"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/commission",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分销"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "分销中心",
|
||||
"group": "分销商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "apply",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请分销商"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "申请分销商",
|
||||
"group": "分销商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods",
|
||||
"style": {
|
||||
"navigationBarTitleText": "推广商品"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "推广商品",
|
||||
"group": "分销商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分销订单"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "分销订单",
|
||||
"group": "分销商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "share-log",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分享记录"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "分享记录",
|
||||
"group": "分销商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "team",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的团队"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "我的团队",
|
||||
"group": "分销商城"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/app",
|
||||
"pages": [
|
||||
{
|
||||
"path": "sign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "签到中心"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "签到中心",
|
||||
"group": "应用"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "score-shop",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商城"
|
||||
},
|
||||
"meta": {
|
||||
"auth": false,
|
||||
"sync": true,
|
||||
"title": "积分商城",
|
||||
"group": "应用"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/public",
|
||||
"pages": [
|
||||
{
|
||||
"path": "setting",
|
||||
"style": {
|
||||
"navigationBarTitleText": "系统设置"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "系统设置",
|
||||
"group": "通用"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "feedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": "问题反馈"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "问题反馈",
|
||||
"group": "通用"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "richtext",
|
||||
"style": {
|
||||
"navigationBarTitleText": "富文本"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "富文本",
|
||||
"group": "通用"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "faq",
|
||||
"style": {
|
||||
"navigationBarTitleText": "常见问题"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "常见问题",
|
||||
"group": "通用"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "error",
|
||||
"style": {
|
||||
"navigationBarTitleText": "错误页面"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "webview",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/coupon",
|
||||
"pages": [
|
||||
{
|
||||
"path": "list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "领券中心"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "领券中心",
|
||||
"group": "优惠券"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠券"
|
||||
},
|
||||
"meta": {
|
||||
"auth": false,
|
||||
"sync": true,
|
||||
"title": "优惠券详情",
|
||||
"group": "优惠券"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/chat",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "客服"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "客服",
|
||||
"group": "客服"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/pay",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收银台"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付结果"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "recharge",
|
||||
"style": {
|
||||
"navigationBarTitleText": "充值余额"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "充值余额",
|
||||
"group": "支付"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "recharge-log",
|
||||
"style": {
|
||||
"navigationBarTitleText": "充值记录"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "充值记录",
|
||||
"group": "支付"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "withdraw",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请提现"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "申请提现",
|
||||
"group": "支付"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "withdraw-log",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现记录"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "提现记录",
|
||||
"group": "支付"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/activity",
|
||||
"pages": [
|
||||
{
|
||||
"path": "groupon/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拼团详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "groupon/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的拼团",
|
||||
"enablePullDownRefresh": true
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "拼团订单",
|
||||
"group": "营销活动"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "营销商品"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "营销商品",
|
||||
"group": "营销活动"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "groupon/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拼团活动"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "拼团活动",
|
||||
"group": "营销活动"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "seckill/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "秒杀活动"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "秒杀活动",
|
||||
"group": "营销活动"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "星品购",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"tabBar": {
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/index/cart"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/index/user"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<s-layout title="拼团详情" class="detail-wrap" navbar="inner" :onShareAppMessage="shareInfo">
|
||||
<view v-if="state.loading"></view>
|
||||
<view v-else-if="state.data && !state.loading">
|
||||
<view
|
||||
class="recharge-box"
|
||||
v-if="state.data.goods"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<s-goods-item
|
||||
class="goods-box"
|
||||
:img="state.data.goods.image"
|
||||
:title="state.data.goods.title"
|
||||
:price="state.data.goods.price[0]"
|
||||
priceColor="#E1212B"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/groupon', {
|
||||
id: state.data.goods.id,
|
||||
activity_id: state.data.goods.activity.id,
|
||||
})
|
||||
"
|
||||
:style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
|
||||
>
|
||||
<template #groupon>
|
||||
<view class="ss-flex">
|
||||
<view class="sales-title">{{ state.data.num }}人团</view>
|
||||
<view class="num-title ss-m-l-20">已拼{{ state.data.goods.sales }}件</view>
|
||||
</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
<view class="countdown-box detail-card ss-p-t-44 ss-flex-col ss-col-center">
|
||||
<view v-if="state.data.status === 'finish' || state.data.status === 'finish_fictitious'">
|
||||
<view v-if="state.data.my">
|
||||
<view class="countdown-title ss-flex">
|
||||
<text class="cicon-check-round"></text>
|
||||
恭喜您~拼团成功
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="countdown-title ss-flex">
|
||||
<text class="cicon-info"></text>
|
||||
抱歉~该团已满员
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="state.data.status === 'invalid'">
|
||||
<view class="countdown-title ss-flex">
|
||||
<text class="cicon-info"></text>
|
||||
{{ state.data.my ? '拼团超时,已自动退款' : '该团已解散' }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="state.data.status === 'ing'">
|
||||
<!-- TODO: 拼团进行中+活动结束-->
|
||||
<view v-if="state.data.activity_status === 'ended'">
|
||||
<view class="countdown-title ss-flex">
|
||||
<text class="cicon-info"></text>
|
||||
拼团已结束,请关注下次活动
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="countdown-title ss-flex" v-if="state.data.activity_status === 'ing'">
|
||||
还差
|
||||
<view class="num">{{ state.data.num - state.data.current_num }}人</view>
|
||||
拼团成功
|
||||
<view class="ss-flex countdown-time">
|
||||
<view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">
|
||||
{{ endTime.m }}
|
||||
</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">
|
||||
{{ endTime.s }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
|
||||
<view
|
||||
class="header-avatar ss-m-r-24 ss-m-b-20"
|
||||
v-for="item in state.data.groupon_logs"
|
||||
:key="item.id"
|
||||
>
|
||||
<image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
|
||||
<view
|
||||
class="header-tag ss-flex ss-col-center ss-row-center"
|
||||
v-if="item.is_leader == '1'"
|
||||
>
|
||||
团长
|
||||
</view>
|
||||
</view>
|
||||
<view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.number" :key="item">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
|
||||
class="avatar-img"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="detail-cell-wrap ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.data.activity?.richtext_id > 0"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/public/richtext', {
|
||||
id: state.data.activity.richtext_id,
|
||||
title: state.data.activity.richtext_title,
|
||||
})
|
||||
"
|
||||
>
|
||||
<view class="label-text">玩法</view>
|
||||
<view class="ss-flex">
|
||||
<view class="cell-content ss-line-1 ss-flex-1">
|
||||
{{ state.data.activity?.richtext_title }}
|
||||
</view>
|
||||
<button class="ss-reset-button">
|
||||
<text class="_icon-forward right-forwrad-icon"></text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="
|
||||
state.data.status == 'finish' ||
|
||||
state.data.status == 'finish_fictitious' ||
|
||||
state.data.status == 'invalid'
|
||||
"
|
||||
class="ss-m-t-40 ss-flex ss-row-center"
|
||||
>
|
||||
<button
|
||||
class="ss-reset-button order-btn"
|
||||
v-if="state.data.my"
|
||||
@tap="onDetail(state.data.my.order_id)"
|
||||
>
|
||||
查看订单
|
||||
</button>
|
||||
<button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
|
||||
</view>
|
||||
<view v-if="state.data.status === 'ing'" class="ss-m-t-40 ss-flex ss-row-center">
|
||||
<view v-if="state.data.activity_status === 'ended'">
|
||||
<button
|
||||
class="ss-reset-button join-btn"
|
||||
v-if="state.data.my"
|
||||
@tap="onDetail(state.data.my.order_id)"
|
||||
>
|
||||
查看订单
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button disabled-btn"
|
||||
v-else
|
||||
disabled
|
||||
@tap="onDetail(state.data.my.order_id)"
|
||||
>
|
||||
去参团
|
||||
</button>
|
||||
</view>
|
||||
<view v-else class="ss-flex ss-row-center">
|
||||
<view v-if="state.data.my">
|
||||
<button
|
||||
class="ss-reset-button join-btn"
|
||||
:disabled="state.data.activity_status === 'ing' && endTime.ms <= 0"
|
||||
@tap="onShare"
|
||||
>
|
||||
邀请好友来拼团
|
||||
</button>
|
||||
</view>
|
||||
<view v-else>
|
||||
<button
|
||||
class="ss-reset-button join-btn"
|
||||
:disabled="state.data.activity_status === 'ing' && endTime.ms <= 0"
|
||||
@tap="onJoinGroupon()"
|
||||
>
|
||||
立即参团
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="state.data.goods">
|
||||
<s-select-groupon-sku
|
||||
:show="state.showSelectSku"
|
||||
:goodsInfo="state.data.goods"
|
||||
:grouponAction="state.grouponAction"
|
||||
v-model:grouponNum="state.grouponNum"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-else-if="!state.data && !state.loading" icon="/static/goods-empty.png"> </s-empty>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const state = reactive({
|
||||
data: {},
|
||||
loading: true,
|
||||
grouponAction: 'create',
|
||||
showSelectSku: false,
|
||||
grouponNum: 0,
|
||||
number: 0,
|
||||
});
|
||||
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.data)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: state.data.goods.title,
|
||||
image: sheep.$url.cdn(state.data.goods.image),
|
||||
desc: state.data.goods.subtitle,
|
||||
params: {
|
||||
page: '5',
|
||||
query: state.data.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'groupon', // 邀请拼团海报
|
||||
title: state.data.goods.title, // 商品标题
|
||||
image: sheep.$url.cdn(state.data.goods.image), // 商品主图
|
||||
price: state.data.goods.price[0], // 商品价格
|
||||
original_price: state.data.goods.original_price, // 商品原价
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
// 订单详情
|
||||
function onDetail(orderId) {
|
||||
sheep.$router.go('/pages/order/detail', {
|
||||
id: orderId,
|
||||
});
|
||||
}
|
||||
|
||||
//去开团
|
||||
function onCreateGroupon() {
|
||||
state.grouponAction = 'create';
|
||||
state.grouponId = 0;
|
||||
state.showSelectSku = true;
|
||||
}
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSkuPrice = e;
|
||||
}
|
||||
|
||||
// 立即参团
|
||||
function onJoinGroupon() {
|
||||
state.grouponAction = 'join';
|
||||
state.grouponId = state.data.id;
|
||||
state.grouponNum = state.data.num;
|
||||
state.showSelectSku = true;
|
||||
}
|
||||
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
buy_type: 'groupon',
|
||||
activity_id: state.data.activity.id,
|
||||
groupon_id: state.grouponId,
|
||||
groupon_num: state.grouponNum,
|
||||
goods_list: [
|
||||
{
|
||||
goods_id: e.goods_id,
|
||||
goods_num: e.goods_num,
|
||||
goods_sku_price_id: e.id,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
const endTime = computed(() => {
|
||||
return useDurationTime(state.data.expire_time);
|
||||
});
|
||||
|
||||
// 获取拼团团队详情
|
||||
async function getGrouponDetail(id) {
|
||||
const { error, data } = await sheep.$api.activity.grouponDetail(id);
|
||||
if (error === 0) {
|
||||
state.data = data;
|
||||
state.number = Number(state.data.num - state.data.current_num);
|
||||
} else {
|
||||
state.data = null;
|
||||
}
|
||||
state.loading = false;
|
||||
}
|
||||
|
||||
function onShare() {
|
||||
showShareModal();
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
getGrouponDetail(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.recharge-box {
|
||||
position: relative;
|
||||
margin-bottom: 120rpx;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/user/withdraw_bg.png')") center/750rpx 100%
|
||||
no-repeat,
|
||||
linear-gradient(115deg, #f44739 0%, #ff6600 100%);
|
||||
border-radius: 0 0 5% 5%;
|
||||
height: 100rpx;
|
||||
|
||||
.goods-box {
|
||||
width: 710rpx;
|
||||
border-radius: 20rpx;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sales-title {
|
||||
height: 32rpx;
|
||||
background: rgba(#ffe0e2, 0.29);
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
padding: 6rpx 20rpx;
|
||||
color: #f7979c;
|
||||
}
|
||||
|
||||
.num-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #383a46;
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 0 4rpx;
|
||||
margin-left: 16rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-box {
|
||||
// height: 364rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.countdown-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
.cicon-check-round {
|
||||
color: #42b111;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.cicon-info {
|
||||
color: #d71e08;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #ff6000;
|
||||
}
|
||||
}
|
||||
|
||||
.header-avatar {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
background: #ececec;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #edc36c;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header-tag {
|
||||
width: 72rpx;
|
||||
height: 36rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: nor;
|
||||
background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
|
||||
border-radius: 16rpx;
|
||||
position: absolute;
|
||||
left: 4rpx;
|
||||
top: -36rpx;
|
||||
}
|
||||
}
|
||||
.default-avatar {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
background: #ececec;
|
||||
border-radius: 50%;
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
background: #ececec;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.order-btn {
|
||||
width: 668rpx;
|
||||
height: 70rpx;
|
||||
border: 2rpx solid #dfdfdf;
|
||||
border-radius: 35rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.disabled-btn {
|
||||
width: 668rpx;
|
||||
height: 70rpx;
|
||||
background: #dddddd;
|
||||
border-radius: 35rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.join-btn {
|
||||
width: 668rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
||||
box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
|
||||
border-radius: 35rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.detail-cell-wrap {
|
||||
width: 100%;
|
||||
padding: 10rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #dfdfdf;
|
||||
background-color: #fff;
|
||||
// min-height: 60rpx;
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
}
|
||||
|
||||
.right-forwrad-icon {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
|
||||
<view
|
||||
class="page-bg"
|
||||
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
|
||||
></view>
|
||||
<view class="list-content">
|
||||
<view class="content-header ss-flex-col ss-col-center ss-row-center">
|
||||
<view class="content-header-title ss-m-b-22 ss-flex ss-row-center">
|
||||
<view>{{ state.activityInfo.title }}</view>
|
||||
<!-- <view class="more">更多</view> -->
|
||||
</view>
|
||||
<view class="content-header-box ss-flex ss-row-center">
|
||||
<view class="countdown-box ss-flex" v-if="endTime?.ms > 0 && state.activityInfo">
|
||||
<view class="countdown-title ss-m-r-12">距结束</view>
|
||||
<view class="ss-flex countdown-time">
|
||||
<view class="ss-flex countdown-h">{{ endTime.h }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="endTime?.ms < 0 && state.activityInfo"> 活动已结束 </view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view
|
||||
class="scroll-box"
|
||||
:style="{ height: pageHeight + 'rpx' }"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<view class="goods-box ss-m-b-20" v-for="item in state.pagination.data" :key="item.id">
|
||||
<s-goods-column
|
||||
class=""
|
||||
size="lg"
|
||||
:data="item"
|
||||
:grouponTag="true"
|
||||
@click="
|
||||
sheep.$router.go('/pages/goods/groupon', {
|
||||
id: item.id,
|
||||
activity_id: state.activityId,
|
||||
})
|
||||
"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn">去拼团</button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const { screenHeight, safeAreaInsets, screenWidth, safeArea } = sheep.$platform.device;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const pageHeight =
|
||||
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sys_navBar - 350;
|
||||
|
||||
const state = reactive({
|
||||
activityId: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
activityInfo: {},
|
||||
});
|
||||
// 倒计时
|
||||
const endTime = computed(() => {
|
||||
if (state.activityInfo.end_time) {
|
||||
return useDurationTime(state.activityInfo.end_time);
|
||||
}
|
||||
});
|
||||
|
||||
async function getList(activityId, page = 1, list_rows = 4) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.activityList({
|
||||
list_rows,
|
||||
activity_id: activityId,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
async function getActivity(id) {}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(state.activityId, state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
onLoad(async (options) => {
|
||||
if (!options.id) {
|
||||
state.activityInfo = null;
|
||||
return;
|
||||
}
|
||||
state.activityId = options.id;
|
||||
getList(state.activityId);
|
||||
const { error, data } = await sheep.$api.activity.activity(options.id);
|
||||
if (error === 0) {
|
||||
state.activityInfo = data;
|
||||
} else {
|
||||
state.activityInfo = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-bg {
|
||||
width: 100%;
|
||||
height: 458rpx;
|
||||
margin-top: -88rpx;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/groupon-header.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.list-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
margin: -190rpx 20rpx 0 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
.content-header {
|
||||
width: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
height: 150rpx;
|
||||
background: linear-gradient(180deg, #fff4f7, #ffe4d1);
|
||||
.content-header-title {
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #ff2923;
|
||||
line-height: 30rpx;
|
||||
position: relative;
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.content-header-box {
|
||||
width: 678rpx;
|
||||
height: 64rpx;
|
||||
background: rgba($color: #fff, $alpha: 0.66);
|
||||
border-radius: 32px;
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #f51c11;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
font-family: OPPOSANS;
|
||||
color: #333;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.countdown-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 28rpx;
|
||||
color: rgba(#ed3c30, 0.23);
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 0 4rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#ed3c30, 0.23);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#ed3c30, 0.23);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-box {
|
||||
height: 900rpx;
|
||||
.goods-box {
|
||||
position: relative;
|
||||
.cart-btn {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
z-index: 11;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,281 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="我的拼团">
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png"> </s-empty>
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="order-list-card-box bg-white ss-r-10 ss-m-t-14 ss-m-20"
|
||||
v-for="order in state.pagination.data"
|
||||
:key="order.id"
|
||||
>
|
||||
<view class="border-bottom">
|
||||
<s-goods-item
|
||||
:img="order.goods.image"
|
||||
:title="order.goods.title"
|
||||
:price="order.goods.price[0]"
|
||||
priceColor="#E1212B"
|
||||
>
|
||||
<template #groupon>
|
||||
<view class="ss-flex">
|
||||
<view class="sales-title"> {{ order.num }}人团 </view>
|
||||
<!-- <view class="num-title ss-m-l-20"> 已拼{{ order.goods.sales }}件 </view> -->
|
||||
</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
<view class="order-card-footer ss-flex ss-row-right ss-p-x-20">
|
||||
<button
|
||||
class="detail-btn ss-reset-button"
|
||||
@tap="sheep.$router.go('/pages/order/detail', { id: order.my.order_id })"
|
||||
>
|
||||
订单详情
|
||||
</button>
|
||||
<button
|
||||
class="detail-btn ss-reset-button"
|
||||
@tap="sheep.$router.go('/pages/activity/groupon/detail', { id: order.id })"
|
||||
>
|
||||
{{ order.status === 'ing' ? '邀请拼团' : '拼团详情' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
|
||||
// 数据
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
deleteOrderId: 0,
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '进行中',
|
||||
value: 'ing',
|
||||
},
|
||||
{
|
||||
name: '拼团成功',
|
||||
value: 'finish',
|
||||
},
|
||||
{
|
||||
name: '拼团失败',
|
||||
value: 'invalid',
|
||||
},
|
||||
];
|
||||
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.currentTab = e.index;
|
||||
getGrouponList();
|
||||
}
|
||||
|
||||
// 订单详情
|
||||
function onDetail(orderSN) {
|
||||
sheep.$router.go('/pages/order/detail', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 继续支付
|
||||
function onPay(orderSN) {
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 评价
|
||||
function onComment(orderSN) {
|
||||
sheep.$router.go('/pages/order/comment/add', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 确认收货
|
||||
async function onConfirm(orderId) {
|
||||
const { error, data } = await sheep.$api.order.confirm(orderId);
|
||||
if (error === 0) {
|
||||
let index = state.pagination.data.findIndex((order) => order.id === orderId);
|
||||
state.pagination.data[index] = data;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
async function onCancel(orderId) {
|
||||
const { error, data } = await sheep.$api.order.cancel(orderId);
|
||||
if (error === 0) {
|
||||
let index = state.pagination.data.findIndex((order) => order.id === orderId);
|
||||
state.pagination.data[index] = data;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
async function getGrouponList(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.activity.myGroupon({
|
||||
type: tabMaps[state.currentTab].value,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.type) {
|
||||
state.currentTab = options.type;
|
||||
}
|
||||
getGrouponList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getGrouponList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
//下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
getGrouponList();
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tool-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #f6f6f6;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
flex: 1;
|
||||
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list-card-box {
|
||||
.order-card-header {
|
||||
height: 80rpx;
|
||||
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-state {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.order-card-footer {
|
||||
height: 100rpx;
|
||||
|
||||
.detail-btn {
|
||||
width: 210rpx;
|
||||
height: 66rpx;
|
||||
border: 2rpx solid #dfdfdf;
|
||||
border-radius: 33rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
width: 210rpx;
|
||||
height: 66rpx;
|
||||
background: linear-gradient(90deg, #fe832a, #ff6600);
|
||||
box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
|
||||
border-radius: 33rpx;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sales-title {
|
||||
height: 32rpx;
|
||||
background: rgba(#ffe0e2, 0.29);
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
padding: 6rpx 20rpx;
|
||||
color: #f7979c;
|
||||
}
|
||||
|
||||
.num-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<s-layout class="activity-wrap" :title="state.activityInfo.title">
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex ss-col-top tip-box">
|
||||
<view class="type-text ss-flex ss-row-center">{{ state.activityInfo.type_text }}：</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="tip-content" v-for="item in state.activityInfo.texts" :key="item">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="activity-left-image" src="/static/activity-left.png" />
|
||||
<image class="activity-right-image" src="/static/activity-right.png" />
|
||||
</view>
|
||||
</su-sticky>
|
||||
|
||||
<view class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
|
||||
<view class="goods-list-box">
|
||||
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:data="item"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'left')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list-box">
|
||||
<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:data="item"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'right')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
leftGoodsList: [],
|
||||
rightGoodsList: [],
|
||||
activityId: 0,
|
||||
activityInfo: {},
|
||||
});
|
||||
// 加载瀑布流
|
||||
let count = 0;
|
||||
let leftHeight = 0;
|
||||
let rightHeight = 0;
|
||||
|
||||
function mountMasonry(height = 0, where = 'left') {
|
||||
if (!state.pagination.data[count]) return;
|
||||
|
||||
if (where === 'left') {
|
||||
leftHeight += height;
|
||||
} else {
|
||||
rightHeight += height;
|
||||
}
|
||||
if (leftHeight <= rightHeight) {
|
||||
state.leftGoodsList.push(state.pagination.data[count]);
|
||||
} else {
|
||||
state.rightGoodsList.push(state.pagination.data[count]);
|
||||
}
|
||||
count++;
|
||||
}
|
||||
async function getList(activityId, page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.activityList({
|
||||
list_rows,
|
||||
activity_id: activityId,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
mountMasonry();
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
async function getActivity(id) {
|
||||
const { error, data } = await sheep.$api.activity.activity(id);
|
||||
if (error === 0) {
|
||||
state.activityInfo = data;
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(state.activityId, state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
onLoad((options) => {
|
||||
state.activityId = options.activityId;
|
||||
getList(state.activityId);
|
||||
getActivity(state.activityId);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.tip-box {
|
||||
background: #fff0e7;
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.activity-left-image {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 58rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.activity-right-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 72rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.type-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
.tip-content {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
|
||||
<view
|
||||
class="page-bg"
|
||||
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
|
||||
></view>
|
||||
<view class="list-content">
|
||||
<view class="content-header ss-flex-col ss-col-center ss-row-center">
|
||||
<view class="content-header-title ss-m-b-22 ss-flex ss-row-center">
|
||||
<view>{{ state.activityInfo.title }}</view>
|
||||
<!-- <view class="more">更多</view> -->
|
||||
</view>
|
||||
<view class="content-header-box ss-flex ss-row-center">
|
||||
<view class="countdown-box ss-flex" v-if="endTime?.ms > 0 && state.activityInfo">
|
||||
<view class="countdown-title ss-m-r-12">距结束</view>
|
||||
<view class="ss-flex countdown-time">
|
||||
<view class="ss-flex countdown-h">{{ endTime.h }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="endTime?.ms < 0 && state.activityInfo"> 活动已结束 </view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view
|
||||
class="scroll-box"
|
||||
:style="{ height: pageHeight + 'rpx' }"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<view class="goods-box ss-m-b-20" v-for="item in state.pagination.data" :key="item.id">
|
||||
<s-goods-column
|
||||
class=""
|
||||
size="lg"
|
||||
:data="item"
|
||||
:seckillTag="true"
|
||||
@click="
|
||||
sheep.$router.go('/pages/goods/seckill', {
|
||||
id: item.id,
|
||||
activity_id: state.activityId,
|
||||
})
|
||||
"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn">去抢购</button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const { screenHeight, safeAreaInsets, screenWidth, safeArea } = sheep.$platform.device;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const pageHeight =
|
||||
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sys_navBar - 350;
|
||||
|
||||
const state = reactive({
|
||||
activityId: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
activityInfo: {},
|
||||
});
|
||||
// 倒计时
|
||||
const endTime = computed(() => {
|
||||
if (state.activityInfo.end_time) {
|
||||
return useDurationTime(state.activityInfo.end_time);
|
||||
}
|
||||
});
|
||||
|
||||
async function getList(activityId, page = 1, list_rows = 4) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.activityList({
|
||||
list_rows,
|
||||
activity_id: activityId,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
async function getActivity(id) {}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(state.activityId, state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
onLoad(async (options) => {
|
||||
if (!options.id) {
|
||||
state.activityInfo = null;
|
||||
return;
|
||||
}
|
||||
state.activityId = options.id;
|
||||
getList(state.activityId);
|
||||
const { error, data } = await sheep.$api.activity.activity(options.id);
|
||||
if (error === 0) {
|
||||
state.activityInfo = data;
|
||||
} else {
|
||||
state.activityInfo = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-bg {
|
||||
width: 100%;
|
||||
height: 458rpx;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/seckill-header.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.list-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
margin: -190rpx 20rpx 0 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
.content-header {
|
||||
width: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
height: 150rpx;
|
||||
background: linear-gradient(180deg, #fff4f7, #ffe6ec);
|
||||
.content-header-title {
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #ff2923;
|
||||
line-height: 30rpx;
|
||||
position: relative;
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.content-header-box {
|
||||
width: 678rpx;
|
||||
height: 64rpx;
|
||||
background: rgba($color: #fff, $alpha: 0.66);
|
||||
border-radius: 32px;
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #f51c11;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
font-family: OPPOSANS;
|
||||
color: #333;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.countdown-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 28rpx;
|
||||
color: rgba(#ed3c30, 0.23);
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 0 4rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#ed3c30, 0.23);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#ed3c30, 0.23);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-box {
|
||||
height: 900rpx;
|
||||
.goods-box {
|
||||
position: relative;
|
||||
.cart-btn {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
z-index: 11;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="积分商城">
|
||||
<view class="ss-p-20">
|
||||
<view v-for="item in state.pagination.data" :key="item.id" class="ss-m-b-20">
|
||||
<s-score-card
|
||||
size="sl"
|
||||
:data="item"
|
||||
priceColor="#FF3000"
|
||||
@tap="sheep.$router.go('/pages/goods/score', { id: item.id })"
|
||||
></s-score-card>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/goods-empty.png"
|
||||
text="暂无积分商品"
|
||||
></s-empty>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
async function getData(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.app.scoreShop({
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponlist = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponlist,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getData(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
onLoad(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,540 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="签到有礼">
|
||||
<view v-if="state.loading"></view>
|
||||
<view class="sign-wrap" v-else-if="state.data && !state.loading">
|
||||
<!-- 签到日历 -->
|
||||
<view class="content-box calendar">
|
||||
<view class="sign-everyday ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<text class="sign-everyday-title">签到日历</text>
|
||||
<view class="sign-num-box">
|
||||
已连续签到
|
||||
<text class="sign-num">{{ state.continue_days }}</text>
|
||||
天
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 切换年月 -->
|
||||
<view class="bar ss-flex ss-col-center ss-row-center">
|
||||
<view class="previous" @tap="handleCalendar(0)"><text class="cicon-back"></text></view>
|
||||
<view class="date ss-m-x-20"
|
||||
>{{ state.cur_year || '--' }} 年 {{ state.cur_month || '--' }} 月</view
|
||||
>
|
||||
<view class="next" @tap="handleCalendar(1)"><text class="cicon-forward"></text></view>
|
||||
</view>
|
||||
|
||||
<!-- 显示星期 -->
|
||||
<view class="week ss-flex">
|
||||
<view
|
||||
class="week-item ss-flex ss-row-center"
|
||||
v-for="(item, index) in state.weeks_ch"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历表 -->
|
||||
<view class="myDateTable">
|
||||
<view
|
||||
v-for="(item, j) in state.data.days"
|
||||
:key="j"
|
||||
class="dateCell ss-flex ss-row-center ss-col-center"
|
||||
>
|
||||
<!-- 空格 -->
|
||||
<view class="ss-flex ss-row-center ss-col-center">
|
||||
<text :decode="true"> </text>
|
||||
</view>
|
||||
<view>
|
||||
<!-- 已签到日期 -->
|
||||
<view v-if="item.is_sign" class="is-sign ss-flex ss-row-center">
|
||||
<view class="is-sign-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
<image
|
||||
class="is-sign-image"
|
||||
:src="sheep.$url.static('/static/img/shop/app/correct.png')"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<!-- 未签到日期 -->
|
||||
<view
|
||||
class="is-sign ss-flex ss-row-center"
|
||||
v-if="item.is_replenish == 1"
|
||||
@tap="onShowRetroactive(item.date)"
|
||||
>
|
||||
<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
<text class="cicon-title"></text>
|
||||
</view>
|
||||
<view
|
||||
class="is-sign ss-flex ss-row-center"
|
||||
v-if="item.is_replenish == 0 && !item.is_sign"
|
||||
>
|
||||
<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 签到按钮 -->
|
||||
<view class="ss-flex ss-col-center ss-row-center sign-box ss-m-y-40">
|
||||
<button class="ss-reset-button sign-btn" v-if="state.isSign === 0" @tap="onSign"
|
||||
>签到</button
|
||||
>
|
||||
<button class="ss-reset-button already-btn" v-if="state.isSign === 1" disabled
|
||||
>已签到</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white ss-m-t-16 ss-p-t-30 ss-p-b-60 ss-p-x-40">
|
||||
<view class="activity-title ss-m-b-30">签到说明</view>
|
||||
<view class="activity-des">
|
||||
1、每日签到固定 {{ state.data.rules.everyday }} 积分
|
||||
<text v-if="state.data.rules.is_inc == '1'">
|
||||
，次日递增奖励 {{ state.data.rules.inc_num }} 积分，直到
|
||||
{{ state.data.rules.until_day }} 天之后不再增加
|
||||
</text>
|
||||
</view>
|
||||
<view class="activity-des" v-if="state.data.rules.discounts?.length > 0">
|
||||
2、
|
||||
<text class="" v-for="i in state.data.rules.discounts" :key="i">
|
||||
连续签到 {{ i.full }} 天，奖励 {{ i.value }} 积分；
|
||||
</text>
|
||||
</view>
|
||||
<view class="activity-des" v-if="state.data.rules.is_replenish == '1'">
|
||||
{{ state.data.rules.discounts?.length > 0 ? '3' : '2' }}、 用户在
|
||||
{{ state.data.rules.replenish_limit }} 天内，可补签
|
||||
{{ state.data.rules.replenish_days }} 天，每次补签消耗
|
||||
{{ state.data.rules.replenish_num }}积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty
|
||||
v-else-if="!state.data && !state.loading"
|
||||
icon="/static/data-empty.png"
|
||||
text="签到活动还未开始"
|
||||
>
|
||||
</s-empty>
|
||||
<su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false">
|
||||
<view class="model-box ss-flex-col">
|
||||
<view class="ss-m-t-56 ss-flex-col ss-col-center">
|
||||
<text class="cicon-check-round"></text>
|
||||
<view class="score-title">{{ state.signin.score }}积分</view>
|
||||
<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
|
||||
已连续打卡{{ state.continue_days }}天
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-bg ss-flex-col ss-col-center ss-row-right">
|
||||
<view class="title ss-m-b-64">签到成功</view>
|
||||
<view class="ss-m-b-40">
|
||||
<button class="ss-reset-button confirm-btn" @tap="onConfirm">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<su-popup :show="state.showRetroactive" type="center" round="10" :isMaskClick="false">
|
||||
<view class="model-box ss-flex-col">
|
||||
<view class="ss-m-t-56 ss-flex-col ss-col-center">
|
||||
<text class="cicon-check-round"></text>
|
||||
<view class="score-title">消耗{{ state.data?.rules.replenish_num }}积分</view>
|
||||
<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
|
||||
已连续打卡{{ state.continue_days }}天
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-bg ss-flex-col ss-col-center ss-row-right">
|
||||
<view class="title ss-m-b-64">确认补签</view>
|
||||
<view class="ss-m-b-40 ss-flex">
|
||||
<button class="ss-reset-button cancel-btn" @tap="state.showRetroactive = false"
|
||||
>取消</button
|
||||
>
|
||||
<button class="ss-reset-button confirm-btn" @tap="onRetroactive">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReady } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
data: {
|
||||
days: [], //日历
|
||||
rules: {}, //规则
|
||||
},
|
||||
cur_year: 0, //当前选的年
|
||||
cur_month: 0, //当前选的月
|
||||
cur_day: 0, //当前选择的天
|
||||
weeks_ch: [
|
||||
{
|
||||
title: '日',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
title: '一',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
title: '二',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
title: '三',
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
title: '四',
|
||||
value: '4',
|
||||
},
|
||||
{
|
||||
title: '五',
|
||||
value: '5',
|
||||
},
|
||||
{
|
||||
title: '六',
|
||||
value: '6',
|
||||
},
|
||||
], //星期
|
||||
showModel: false, //签到弹框
|
||||
continue_days: 0, //连续签到天数
|
||||
signin: {}, // 签到
|
||||
showRetroactive: false, //补签弹框
|
||||
date: '', //补签选中日期
|
||||
isSign: 0, //今天是否签到
|
||||
loading: true,
|
||||
});
|
||||
async function onSign() {
|
||||
const { error, data } = await sheep.$api.activity.signAdd();
|
||||
if (error === 0) {
|
||||
state.showModel = true;
|
||||
state.signin = data;
|
||||
// getData();
|
||||
}
|
||||
}
|
||||
|
||||
function onShowRetroactive(e) {
|
||||
state.showRetroactive = true;
|
||||
state.date = e;
|
||||
}
|
||||
//签到确认刷新页面
|
||||
function onConfirm() {
|
||||
state.showModel = false;
|
||||
getData();
|
||||
}
|
||||
//补签
|
||||
async function onRetroactive() {
|
||||
const { error, data } = await sheep.$api.activity.replenish({
|
||||
date: state.date,
|
||||
});
|
||||
if (error === 0) {
|
||||
state.showRetroactive = false;
|
||||
getData();
|
||||
}
|
||||
}
|
||||
|
||||
async function getData(mouth) {
|
||||
const { error, data } = await sheep.$api.activity.signList(mouth);
|
||||
if (error === 0) {
|
||||
state.data = data;
|
||||
} else {
|
||||
state.data = null;
|
||||
}
|
||||
state.loading = false;
|
||||
if (state.data) {
|
||||
state.data.days.forEach((i, index) => {
|
||||
if (index < i.week) {
|
||||
index++;
|
||||
var obj = {
|
||||
day: null,
|
||||
is_sign: false,
|
||||
};
|
||||
state.data.days.unshift(obj);
|
||||
}
|
||||
if (index == 1) {
|
||||
let arr = i.date.split('-');
|
||||
state.cur_year = arr[0];
|
||||
state.cur_month = arr[1];
|
||||
}
|
||||
});
|
||||
if (state.data.days[0].day == null) {
|
||||
state.data.days.forEach((i, index) => {
|
||||
if (i.current == 'today') {
|
||||
state.isSign = i.is_sign;
|
||||
}
|
||||
});
|
||||
}
|
||||
state.continue_days = data.continue_days;
|
||||
}
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
// 切换控制年月，上一个月，下一个月
|
||||
const handleCalendar = (type) => {
|
||||
const cur_year = parseInt(state.cur_year);
|
||||
const cur_month = parseInt(state.cur_month);
|
||||
var newMonth;
|
||||
var newYear = cur_year;
|
||||
if (type === 0) {
|
||||
//上个月
|
||||
newMonth = cur_month - 1;
|
||||
if (newMonth < 1) {
|
||||
newYear = cur_year - 1;
|
||||
newMonth = 12;
|
||||
} else if (newMonth < 10) {
|
||||
newMonth = '0' + newMonth;
|
||||
}
|
||||
} else {
|
||||
newMonth = cur_month + 1;
|
||||
if (newMonth > 12) {
|
||||
newYear = cur_year + 1;
|
||||
newMonth = 1;
|
||||
} else if (newMonth < 10) {
|
||||
newMonth = '0' + newMonth;
|
||||
}
|
||||
}
|
||||
getData({
|
||||
month: newYear + '-' + newMonth,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
border-top: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
}
|
||||
|
||||
// 日历
|
||||
.calendar {
|
||||
background: #fff;
|
||||
|
||||
.sign-everyday {
|
||||
height: 100rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 2rpx solid rgba(223, 223, 223, 0.4);
|
||||
|
||||
.sign-everyday-title {
|
||||
font-size: 32rpx;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sign-num-box {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
|
||||
.sign-num {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ff6000;
|
||||
padding: 0 10rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 年月日
|
||||
.bar {
|
||||
height: 100rpx;
|
||||
|
||||
.date {
|
||||
font-size: 30rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.cicon-back {
|
||||
margin-top: 6rpx;
|
||||
font-size: 30rpx;
|
||||
color: #c4c4c4;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
margin-top: 6rpx;
|
||||
font-size: 30rpx;
|
||||
color: #c4c4c4;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// 星期
|
||||
.week {
|
||||
.week-item {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 日历表
|
||||
.myDateTable {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.dateCell {
|
||||
width: calc(750rpx / 7);
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-sign {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
position: relative;
|
||||
|
||||
.is-sign-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.is-sign-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-title {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -6rpx;
|
||||
font-size: 20rpx;
|
||||
color: red;
|
||||
}
|
||||
|
||||
// 签到按钮
|
||||
.sign-box {
|
||||
height: 140rpx;
|
||||
width: 100%;
|
||||
|
||||
.sign-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
|
||||
background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.already-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
width: 520rpx;
|
||||
// height: 590rpx;
|
||||
background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
|
||||
// background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 10rpx;
|
||||
|
||||
.cicon-check-round {
|
||||
font-size: 70rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.score-title {
|
||||
font-size: 34rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #fcff00;
|
||||
}
|
||||
|
||||
.model-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.model-bg {
|
||||
width: 520rpx;
|
||||
height: 344rpx;
|
||||
background-size: 100% 100%;
|
||||
background-image: v-bind('sheep.$url.css("/static/img/shop/app/sign.png")');
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 0 0 10rpx 10rpx;
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
// color: var(--ui-BG-Main);
|
||||
color: #ff6000;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
border: 2rpx solid #ff6000;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
line-height: normal;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//签到说明
|
||||
.activity-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.activity-des {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view class="goods ss-flex">
|
||||
<image class="image" :src="sheep.$url.cdn(goodsData.image)" mode="aspectFill"> </image>
|
||||
<view class="ss-flex-1">
|
||||
<view class="title ss-line-2">
|
||||
{{ goodsData.title }}
|
||||
</view>
|
||||
<view v-if="goodsData.subtitle" class="subtitle ss-line-1">
|
||||
{{ goodsData.subtitle }}
|
||||
</view>
|
||||
<view class="price ss-m-t-8">
|
||||
￥{{ isArray(goodsData.price) ? goodsData.price[0] : goodsData.price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { isArray } from 'lodash';
|
||||
|
||||
const props = defineProps({
|
||||
goodsData: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.image {
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 64rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="order">
|
||||
<view class="top ss-flex ss-row-between">
|
||||
<span>{{ orderData.order_sn }}</span>
|
||||
<span>{{ orderData.create_time.split(' ')[1] }}</span>
|
||||
</view>
|
||||
<template v-if="from != 'msg'">
|
||||
<view class="bottom ss-flex" v-for="item in orderData.items" :key="item">
|
||||
<image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
|
||||
<view class="ss-flex-1">
|
||||
<view class="title ss-line-2">
|
||||
{{ item.goods_title }}
|
||||
</view>
|
||||
<view v-if="item.goods_num" class="num ss-m-b-10"> 数量：{{ item.goods_num }} </view>
|
||||
<view class="ss-flex ss-row-between ss-m-t-8">
|
||||
<span class="price">￥{{ item.goods_price }}</span>
|
||||
<span class="status">{{ orderData.status_text }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="bottom ss-flex" v-for="item in [orderData.items[0]]" :key="item">
|
||||
<image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
|
||||
<view class="ss-flex-1">
|
||||
<view class="title title-1 ss-line-1">
|
||||
{{ item.goods_title }}
|
||||
</view>
|
||||
<view class="order-total ss-flex ss-row-between ss-m-t-8">
|
||||
<span>共{{ orderData.items.length }}件商品</span>
|
||||
<span>合计 ¥{{ orderData.pay_fee }}</span>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-right ss-m-t-8">
|
||||
<span class="status">{{ orderData.status_text }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const props = defineProps({
|
||||
from: String,
|
||||
orderData: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.top {
|
||||
line-height: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
border-bottom: 1px solid rgba(223, 223, 223, 0.5);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex-shrink: 0;
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 64rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
&.title-1 {
|
||||
height: 32rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.order-total {
|
||||
line-height: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<su-popup :show="show" showClose round="10" backgroundColor="#eee" @close="emits('close')">
|
||||
<view class="select-popup">
|
||||
<view class="title">
|
||||
<span>{{ mode == 'goods' ? '我的浏览' : '我的订单' }}</span>
|
||||
</view>
|
||||
<scroll-view
|
||||
class="scroll-box"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="true"
|
||||
:show-scrollbar="false"
|
||||
@scrolltolower="loadmore"
|
||||
>
|
||||
<view
|
||||
class="item"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item"
|
||||
@tap="emits('select', { type: mode, data: item })"
|
||||
>
|
||||
<template v-if="mode == 'goods'">
|
||||
<GoodsItem :goodsData="item.goods" />
|
||||
</template>
|
||||
<template v-if="mode == 'order'">
|
||||
<OrderItem :orderData="item" />
|
||||
</template>
|
||||
</view>
|
||||
<uni-load-more :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多' }" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import GoodsItem from './goods.vue';
|
||||
import OrderItem from './order.vue';
|
||||
|
||||
const emits = defineEmits(['select', 'close']);
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'goods',
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.mode,
|
||||
() => {
|
||||
state.pagination.data = [];
|
||||
if (props.mode) {
|
||||
getList(state.pagination.page);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
loadStatus: '',
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
});
|
||||
|
||||
async function getList(page, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
const res =
|
||||
props.mode == 'goods'
|
||||
? await sheep.$api.user.view.list({
|
||||
page,
|
||||
list_rows,
|
||||
})
|
||||
: await sheep.$api.order.list({
|
||||
page,
|
||||
list_rows,
|
||||
});
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-popup {
|
||||
max-height: 600rpx;
|
||||
|
||||
.title {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
padding: 0 26rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -15px;
|
||||
background: var(--ui-BG-Main);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
margin: 26rpx 26rpx 0;
|
||||
border-radius: 20rpx;
|
||||
|
||||
:deep() {
|
||||
.image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
export const emojiList = [
|
||||
{ name: '[笑掉牙]', file: 'xiaodiaoya.png' },
|
||||
{ name: '[可爱]', file: 'keai.png' },
|
||||
{ name: '[冷酷]', file: 'lengku.png' },
|
||||
{ name: '[闭嘴]', file: 'bizui.png' },
|
||||
{ name: '[生气]', file: 'shengqi.png' },
|
||||
{ name: '[惊恐]', file: 'jingkong.png' },
|
||||
{ name: '[瞌睡]', file: 'keshui.png' },
|
||||
{ name: '[大笑]', file: 'daxiao.png' },
|
||||
{ name: '[爱心]', file: 'aixin.png' },
|
||||
{ name: '[坏笑]', file: 'huaixiao.png' },
|
||||
{ name: '[飞吻]', file: 'feiwen.png' },
|
||||
{ name: '[疑问]', file: 'yiwen.png' },
|
||||
{ name: '[开心]', file: 'kaixin.png' },
|
||||
{ name: '[发呆]', file: 'fadai.png' },
|
||||
{ name: '[流泪]', file: 'liulei.png' },
|
||||
{ name: '[汗颜]', file: 'hanyan.png' },
|
||||
{ name: '[惊悚]', file: 'jingshu.png' },
|
||||
{ name: '[困~]', file: 'kun.png' },
|
||||
{ name: '[心碎]', file: 'xinsui.png' },
|
||||
{ name: '[天使]', file: 'tianshi.png' },
|
||||
{ name: '[晕]', file: 'yun.png' },
|
||||
{ name: '[啊]', file: 'a.png' },
|
||||
{ name: '[愤怒]', file: 'fennu.png' },
|
||||
{ name: '[睡着]', file: 'shuizhuo.png' },
|
||||
{ name: '[面无表情]', file: 'mianwubiaoqing.png' },
|
||||
{ name: '[难过]', file: 'nanguo.png' },
|
||||
{ name: '[犯困]', file: 'fankun.png' },
|
||||
{ name: '[好吃]', file: 'haochi.png' },
|
||||
{ name: '[呕吐]', file: 'outu.png' },
|
||||
{ name: '[龇牙]', file: 'ziya.png' },
|
||||
{ name: '[懵比]', file: 'mengbi.png' },
|
||||
{ name: '[白眼]', file: 'baiyan.png' },
|
||||
{ name: '[饿死]', file: 'esi.png' },
|
||||
{ name: '[凶]', file: 'xiong.png' },
|
||||
{ name: '[感冒]', file: 'ganmao.png' },
|
||||
{ name: '[流汗]', file: 'liuhan.png' },
|
||||
{ name: '[笑哭]', file: 'xiaoku.png' },
|
||||
{ name: '[流口水]', file: 'liukoushui.png' },
|
||||
{ name: '[尴尬]', file: 'ganga.png' },
|
||||
{ name: '[惊讶]', file: 'jingya.png' },
|
||||
{ name: '[大惊]', file: 'dajing.png' },
|
||||
{ name: '[不好意思]', file: 'buhaoyisi.png' },
|
||||
{ name: '[大闹]', file: 'danao.png' },
|
||||
{ name: '[不可思议]', file: 'bukesiyi.png' },
|
||||
{ name: '[爱你]', file: 'aini.png' },
|
||||
{ name: '[红心]', file: 'hongxin.png' },
|
||||
{ name: '[点赞]', file: 'dianzan.png' },
|
||||
{ name: '[恶魔]', file: 'emo.png' },
|
||||
];
|
||||
|
||||
export let emojiPage = {};
|
||||
emojiList.forEach((item, index) => {
|
||||
if (!emojiPage[Math.floor(index / 30) + 1]) {
|
||||
emojiPage[Math.floor(index / 30) + 1] = [];
|
||||
}
|
||||
emojiPage[Math.floor(index / 30) + 1].push(item);
|
||||
});
|
||||
@@ -0,0 +1,851 @@
|
||||
<template>
|
||||
<s-layout class="chat-wrap" title="客服" navbar="inner">
|
||||
<div class="status">
|
||||
{{ socketState.isConnect ? customerServiceInfo.title : '网络已断开，请检查网络后刷新重试' }}
|
||||
</div>
|
||||
<div class="page-bg" :style="{ height: sys_navBar + 'px' }"></div>
|
||||
<view class="chat-box" :style="{ height: pageHeight + 'px' }">
|
||||
<scroll-view
|
||||
:style="{ height: pageHeight + 'px' }"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
:scroll-into-view="chat.scrollInto"
|
||||
>
|
||||
<button
|
||||
class="loadmore-btn ss-reset-button"
|
||||
v-if="
|
||||
chatList.length &&
|
||||
chatHistoryPagination.lastPage > 1 &&
|
||||
loadingMap[chatHistoryPagination.loadStatus].title
|
||||
"
|
||||
@click="onLoadMore"
|
||||
>
|
||||
{{ loadingMap[chatHistoryPagination.loadStatus].title }}
|
||||
<i
|
||||
class="loadmore-icon sa-m-l-6"
|
||||
:class="loadingMap[chatHistoryPagination.loadStatus].icon"
|
||||
></i>
|
||||
</button>
|
||||
<view class="message-item ss-flex-col" v-for="(item, index) in chatList" :key="index">
|
||||
<view class="ss-flex ss-row-center ss-col-center">
|
||||
<!-- 日期 -->
|
||||
<view v-if="item.from !== 'system' && showTime(item, index)" class="date-message">
|
||||
{{ formatTime(item.date) }}
|
||||
</view>
|
||||
<!-- 系统消息 -->
|
||||
<view v-if="item.from === 'system'" class="system-message">
|
||||
{{ item.content.text }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 常见问题 -->
|
||||
<view v-if="item.mode === 'template' && item.content.list.length" class="template-wrap">
|
||||
<view class="title">猜你想问</view>
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in item.content.list"
|
||||
:key="index"
|
||||
@click="onTemplateList(item)"
|
||||
>
|
||||
* {{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="
|
||||
(item.from === 'customer_service' && item.mode !== 'template') ||
|
||||
item.from === 'customer'
|
||||
"
|
||||
class="ss-flex ss-col-top"
|
||||
:class="[
|
||||
item.from === 'customer_service'
|
||||
? `ss-row-left`
|
||||
: item.from === 'customer'
|
||||
? `ss-row-right`
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
<!-- 客服头像 -->
|
||||
<image
|
||||
v-show="item.from === 'customer_service'"
|
||||
class="chat-avatar ss-m-r-24"
|
||||
:src="
|
||||
sheep.$url.cdn(item?.sender?.avatar) ||
|
||||
sheep.$url.static('/static/img/shop/chat/default.png')
|
||||
"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
|
||||
<!-- 发送状态 -->
|
||||
<span
|
||||
v-if="
|
||||
item.from === 'customer' &&
|
||||
index == chatData.chatList.length - 1 &&
|
||||
chatData.isSendSucces !== 0
|
||||
"
|
||||
class="send-status"
|
||||
>
|
||||
<image
|
||||
v-if="chatData.isSendSucces == -1"
|
||||
class="loading"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/loading.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-if="chatData.isSendSucces == 1"
|
||||
class="warning"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/warning.png')"
|
||||
mode="aspectFill"
|
||||
@click="onAgainSendMessage(item)"
|
||||
></image>
|
||||
</span>
|
||||
|
||||
<!-- 内容 -->
|
||||
<template v-if="item.mode === 'text'">
|
||||
<view class="message-box" :class="[item.from]">
|
||||
<div
|
||||
class="message-text ss-flex"
|
||||
@click="onRichtext"
|
||||
v-html="replaceEmoji(item.content.text)"
|
||||
></div>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item.mode === 'image'">
|
||||
<view class="message-box" :class="[item.from]" :style="{ width: '200rpx' }">
|
||||
<su-image
|
||||
class="message-img"
|
||||
isPreview
|
||||
:previewList="[sheep.$url.cdn(item.content.url)]"
|
||||
:current="0"
|
||||
:src="sheep.$url.cdn(item.content.url)"
|
||||
:height="200"
|
||||
mode="scaleToFill"
|
||||
></su-image>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item.mode === 'goods'">
|
||||
<GoodsItem
|
||||
:goodsData="item.content.item"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
id: item.content.item.id,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="item.mode === 'order'">
|
||||
<OrderItem
|
||||
from="msg"
|
||||
:orderData="item.content.item"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/order/detail', {
|
||||
id: item.content.item.id,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<!-- user头像 -->
|
||||
<image
|
||||
v-show="item.from === 'customer'"
|
||||
class="chat-avatar ss-m-l-24"
|
||||
:src="sheep.$url.cdn(customerUserInfo.avatar)"
|
||||
mode="aspectFill"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view id="scrollBottom"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<su-fixed bottom>
|
||||
<view class="send-wrap ss-flex">
|
||||
<view class="left ss-flex ss-flex-1">
|
||||
<uni-easyinput
|
||||
class="ss-flex-1 ss-p-l-22"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
v-model="chat.msg"
|
||||
placeholder="请输入你要咨询的问题"
|
||||
></uni-easyinput>
|
||||
</view>
|
||||
<text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
|
||||
<text
|
||||
v-if="!chat.msg"
|
||||
class="sicon-edit"
|
||||
:class="{ 'is-active': chat.toolsMode == 'tools' }"
|
||||
@tap.stop="onTools('tools')"
|
||||
></text>
|
||||
<button v-if="chat.msg" class="ss-reset-button send-btn" @tap="onSendMessage">
|
||||
发送
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<su-popup
|
||||
:show="chat.showTools"
|
||||
@close="
|
||||
chat.showTools = false;
|
||||
chat.toolsMode = '';
|
||||
"
|
||||
>
|
||||
<view class="ss-modal-box ss-flex-col">
|
||||
<view class="send-wrap ss-flex">
|
||||
<view class="left ss-flex ss-flex-1">
|
||||
<uni-easyinput
|
||||
class="ss-flex-1 ss-p-l-22"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
v-model="chat.msg"
|
||||
placeholder="请输入你要咨询的问题"
|
||||
></uni-easyinput>
|
||||
</view>
|
||||
<text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
|
||||
<text></text>
|
||||
<text
|
||||
v-if="!chat.msg"
|
||||
class="sicon-edit"
|
||||
:class="{ 'is-active': chat.toolsMode == 'tools' }"
|
||||
@tap.stop="onTools('tools')"
|
||||
></text>
|
||||
<button v-if="chat.msg" class="ss-reset-button send-btn" @tap="onSendMessage">
|
||||
发送
|
||||
</button>
|
||||
</view>
|
||||
<view class="content ss-flex ss-flex-1">
|
||||
<template v-if="chat.toolsMode == 'emoji'">
|
||||
<swiper
|
||||
class="emoji-swiper"
|
||||
:indicator-dots="true"
|
||||
circular
|
||||
indicator-active-color="#7063D2"
|
||||
indicator-color="rgba(235, 231, 255, 1)"
|
||||
:autoplay="false"
|
||||
:interval="3000"
|
||||
:duration="1000"
|
||||
>
|
||||
<swiper-item v-for="emoji in emojiPage" :key="emoji">
|
||||
<view class="ss-flex ss-flex-wrap">
|
||||
<template v-for="item in emoji" :key="item">
|
||||
<image
|
||||
class="emoji-img"
|
||||
:src="sheep.$url.cdn(`/static/img/chat/emoji/${item.file}`)"
|
||||
@tap="onEmoji(item)"
|
||||
>
|
||||
</image>
|
||||
</template>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="image">
|
||||
<s-uploader
|
||||
file-mediatype="image"
|
||||
:imageStyles="{ width: 50, height: 50, border: false }"
|
||||
@select="onSelect({ type: 'image', data: $event })"
|
||||
>
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/image.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</s-uploader>
|
||||
<view>图片</view>
|
||||
</view>
|
||||
<view class="goods" @tap="onShowSelect('goods')">
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/goods.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>商品</view>
|
||||
</view>
|
||||
<view class="order" @tap="onShowSelect('order')">
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/order.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>订单</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
|
||||
<SelectPopup
|
||||
:mode="chat.selectMode"
|
||||
:show="chat.showSelect"
|
||||
@select="onSelect"
|
||||
@close="chat.showSelect = false"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive, toRefs } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { emojiList, emojiPage } from './emoji.js';
|
||||
import SelectPopup from './components/select-popup.vue';
|
||||
import GoodsItem from './components/goods.vue';
|
||||
import OrderItem from './components/order.vue';
|
||||
import { useChatWebSocket } from './socket';
|
||||
|
||||
const {
|
||||
socketInit,
|
||||
state: chatData,
|
||||
socketSendMsg,
|
||||
formatChatInput,
|
||||
socketHistoryList,
|
||||
onDrop,
|
||||
onPaste,
|
||||
getFocus,
|
||||
// upload,
|
||||
getUserToken,
|
||||
// socketTest,
|
||||
showTime,
|
||||
formatTime,
|
||||
} = useChatWebSocket();
|
||||
const chatList = toRefs(chatData).chatList;
|
||||
const customerServiceInfo = toRefs(chatData).customerServerInfo;
|
||||
const chatHistoryPagination = toRefs(chatData).chatHistoryPagination;
|
||||
const customerUserInfo = toRefs(chatData).customerUserInfo;
|
||||
const socketState = toRefs(chatData).socketState;
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const chatConfig = computed(() => sheep.$store('app').chat);
|
||||
|
||||
const { screenHeight, safeAreaInsets, safeArea, screenWidth } = sheep.$platform.device;
|
||||
const pageHeight = safeArea.height - 44 - 35 - 50;
|
||||
|
||||
const chatStatus = {
|
||||
online: {
|
||||
text: '在线',
|
||||
colorVariate: '#46c55f',
|
||||
},
|
||||
offline: {
|
||||
text: '离线',
|
||||
colorVariate: '#b5b5b5',
|
||||
},
|
||||
busy: {
|
||||
text: '忙碌',
|
||||
colorVariate: '#ff0e1b',
|
||||
},
|
||||
};
|
||||
|
||||
// 加载更多
|
||||
const loadingMap = {
|
||||
loadmore: {
|
||||
title: '查看更多',
|
||||
icon: 'el-icon-d-arrow-left',
|
||||
},
|
||||
nomore: {
|
||||
title: '没有更多了',
|
||||
icon: '',
|
||||
},
|
||||
loading: {
|
||||
title: '加载中... ',
|
||||
icon: 'el-icon-loading',
|
||||
},
|
||||
};
|
||||
const onLoadMore = () => {
|
||||
chatHistoryPagination.value.page < chatHistoryPagination.value.lastPage && socketHistoryList();
|
||||
};
|
||||
|
||||
const chat = reactive({
|
||||
msg: '',
|
||||
scrollInto: '',
|
||||
|
||||
showTools: false,
|
||||
toolsMode: '',
|
||||
|
||||
showSelect: false,
|
||||
selectMode: '',
|
||||
chatStyle: {
|
||||
mode: 'inner',
|
||||
color: '#F8270F',
|
||||
type: 'color',
|
||||
alwaysShow: 1,
|
||||
src: '',
|
||||
list: {},
|
||||
},
|
||||
});
|
||||
|
||||
// 点击工具栏开关
|
||||
function onTools(mode) {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!chat.toolsMode || chat.toolsMode === mode) {
|
||||
chat.showTools = !chat.showTools;
|
||||
}
|
||||
chat.toolsMode = mode;
|
||||
if (!chat.showTools) {
|
||||
chat.toolsMode = '';
|
||||
}
|
||||
}
|
||||
|
||||
function onShowSelect(mode) {
|
||||
chat.showTools = false;
|
||||
chat.showSelect = true;
|
||||
chat.selectMode = mode;
|
||||
}
|
||||
|
||||
async function onSelect({ type, data }) {
|
||||
let msg = '';
|
||||
switch (type) {
|
||||
case 'image':
|
||||
const { path, fullurl } = await sheep.$api.app.upload(data.tempFiles[0].path, 'default');
|
||||
msg = {
|
||||
from: 'customer',
|
||||
mode: 'image',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
url: fullurl,
|
||||
path: path,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'goods':
|
||||
msg = {
|
||||
from: 'customer',
|
||||
mode: 'goods',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
item: {
|
||||
id: data.goods.id,
|
||||
title: data.goods.title,
|
||||
image: data.goods.image,
|
||||
price: data.goods.price,
|
||||
stock: data.goods.stock,
|
||||
},
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'order':
|
||||
msg = {
|
||||
from: 'customer',
|
||||
mode: 'order',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
item: {
|
||||
id: data.id,
|
||||
order_sn: data.order_sn,
|
||||
create_time: data.create_time,
|
||||
pay_fee: data.pay_fee,
|
||||
items: data.items.filter((item) => ({
|
||||
goods_id: item.goods_id,
|
||||
goods_title: item.goods_title,
|
||||
goods_image: item.goods_image,
|
||||
goods_price: item.goods_price,
|
||||
})),
|
||||
status_text: data.status_text,
|
||||
},
|
||||
},
|
||||
};
|
||||
break;
|
||||
}
|
||||
if (msg) {
|
||||
socketSendMsg(msg, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
// scrollBottom();
|
||||
chat.showTools = false;
|
||||
chat.showSelect = false;
|
||||
chat.selectMode = '';
|
||||
}
|
||||
}
|
||||
|
||||
function onAgainSendMessage(item) {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
|
||||
return;
|
||||
}
|
||||
if (!item) return;
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: item.content,
|
||||
};
|
||||
socketSendMsg(data, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
}
|
||||
|
||||
function onSendMessage() {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
|
||||
return;
|
||||
}
|
||||
if (!chat.msg) return;
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: chat.msg,
|
||||
},
|
||||
};
|
||||
socketSendMsg(data, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
chat.showTools = false;
|
||||
// scrollBottom();
|
||||
chat.msg = '';
|
||||
}
|
||||
|
||||
// 点击猜你想问
|
||||
function onTemplateList(e) {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
|
||||
return;
|
||||
}
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: e.title,
|
||||
},
|
||||
customData: {
|
||||
question_id: e.id,
|
||||
},
|
||||
};
|
||||
socketSendMsg(data, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
// scrollBottom();
|
||||
}
|
||||
|
||||
function onEmoji(item) {
|
||||
chat.msg += item.name;
|
||||
}
|
||||
|
||||
function selEmojiFile(name) {
|
||||
for (let index in emojiList) {
|
||||
if (emojiList[index].name === name) {
|
||||
return emojiList[index].file;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function replaceEmoji(data) {
|
||||
let newData = data;
|
||||
if (typeof newData !== 'object') {
|
||||
let reg = /\[(.+?)\]/g; // [] 中括号
|
||||
let zhEmojiName = newData.match(reg);
|
||||
if (zhEmojiName) {
|
||||
zhEmojiName.forEach((item) => {
|
||||
let emojiFile = selEmojiFile(item);
|
||||
newData = newData.replace(
|
||||
item,
|
||||
`<img class="chat-img" style="width:25px;height:25px;margin:0 3px" src="${sheep.$url.cdn(
|
||||
'/static/img/chat/emoji/' + emojiFile,
|
||||
)}"/>`,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
return newData;
|
||||
}
|
||||
|
||||
function scrollBottom() {
|
||||
let timeout = null;
|
||||
chat.scrollInto = '';
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
chat.scrollInto = 'scrollBottom';
|
||||
}, 100);
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
const { error } = await getUserToken();
|
||||
if (error === 0) {
|
||||
socketInit(chatConfig.value, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
} else {
|
||||
socketState.value.isConnect = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-bg {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.chat-wrap {
|
||||
// :deep() {
|
||||
// .ui-navbar-box {
|
||||
// background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
// }
|
||||
// }
|
||||
|
||||
.status {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
height: 70rpx;
|
||||
padding: 0 30rpx;
|
||||
background: var(--ui-BG-Main-opacity-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
padding: 0 20rpx 0;
|
||||
|
||||
.loadmore-btn {
|
||||
width: 98%;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
|
||||
.loadmore-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 33rpx;
|
||||
}
|
||||
|
||||
.date-message,
|
||||
.system-message {
|
||||
width: fit-content;
|
||||
border-radius: 12rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background-color: var(--ui-BG-3);
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.send-status {
|
||||
color: #333;
|
||||
height: 80rpx;
|
||||
margin-right: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.loading {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
-webkit-animation: rotating 2s linear infinite;
|
||||
animation: rotating 2s linear infinite;
|
||||
|
||||
@-webkit-keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
|
||||
.message-box {
|
||||
max-width: 50%;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
// max-width: 500rpx;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
|
||||
&.customer_service {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
:deep() {
|
||||
.imgred {
|
||||
width: 100%;
|
||||
}
|
||||
.imgred,
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.goods,
|
||||
.order {
|
||||
max-width: 500rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.message-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.template-wrap {
|
||||
// width: 100%;
|
||||
padding: 20rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-img {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
#scrollBottom {
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.send-wrap {
|
||||
padding: 18rpx 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.left {
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--ui-BG-1);
|
||||
}
|
||||
|
||||
.bq {
|
||||
font-size: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.sicon-edit {
|
||||
font-size: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
transform: rotate(0deg);
|
||||
transition: all linear 0.2s;
|
||||
|
||||
&.is-active {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
margin-left: 11rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
align-content: space-around;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
padding: 20rpx 0 0;
|
||||
|
||||
.emoji-swiper {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.emoji-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image,
|
||||
.goods,
|
||||
.order {
|
||||
width: 33.3%;
|
||||
height: 280rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.uni-file-picker__container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-picker__box {
|
||||
display: none;
|
||||
|
||||
&:last-of-type {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,821 @@
|
||||
import { reactive, ref, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import chat from '@/sheep/api/chat';
|
||||
import dayjs from 'dayjs';
|
||||
import io from '@hyoga/uni-socket.io';
|
||||
|
||||
export function useChatWebSocket(socketConfig) {
|
||||
let SocketIo = null;
|
||||
|
||||
// chat状态数据
|
||||
const state = reactive({
|
||||
chatDotNum: 0, //总状态红点
|
||||
chatList: [], //会话信息
|
||||
customerUserInfo: {}, //用户信息
|
||||
customerServerInfo: {
|
||||
//客服信息
|
||||
title: '连接中...',
|
||||
state: 'connecting',
|
||||
avatar: null,
|
||||
nickname: '',
|
||||
},
|
||||
socketState: {
|
||||
isConnect: true, //是否连接成功
|
||||
isConnecting: false, //重连中，不允许新的socket开启。
|
||||
tip: '',
|
||||
},
|
||||
chatHistoryPagination: {
|
||||
page: 0, //当前页
|
||||
list_rows: 10, //每页条数
|
||||
last_id: 0, //最后条ID
|
||||
lastPage: 0, //总共多少页
|
||||
loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
||||
},
|
||||
templateChatList: [], //猜你想问
|
||||
|
||||
chatConfig: {}, // 配置信息
|
||||
|
||||
isSendSucces: -1, // 是否发送成功 -1=发送中|0=发送成功|1发送失败
|
||||
});
|
||||
|
||||
/**
|
||||
* 连接初始化
|
||||
* @param {Object} config - 配置信息
|
||||
* @param {Function} callBack -回调函数,有新消息接入，保持底部
|
||||
*/
|
||||
const socketInit = (config, callBack) => {
|
||||
state.chatConfig = config;
|
||||
if (SocketIo && SocketIo.connected) return; // 如果socket已经连接，返回false
|
||||
if (state.socketState.isConnecting) return; // 重连中，返回false
|
||||
|
||||
// 启动初始化
|
||||
SocketIo = io(config.chat_domain, {
|
||||
reconnection: true, // 默认 true 是否断线重连
|
||||
reconnectionAttempts: 5, // 默认无限次 断线尝试次数
|
||||
reconnectionDelay: 1000, // 默认 1000，进行下一次重连的间隔。
|
||||
reconnectionDelayMax: 5000, // 默认 5000， 重新连接等待的最长时间 默认 5000
|
||||
randomizationFactor: 0.5, // 默认 0.5 [0-1]，随机重连延迟时间
|
||||
timeout: 20000, // 默认 20s
|
||||
transports: ['websocket', 'polling'], // websocket | polling,
|
||||
...config,
|
||||
});
|
||||
|
||||
// 监听连接
|
||||
SocketIo.on('connect', async (res) => {
|
||||
socketReset(callBack);
|
||||
// socket连接
|
||||
// 用户登录
|
||||
// 顾客登录
|
||||
console.log('socket:connect');
|
||||
});
|
||||
// 监听消息
|
||||
SocketIo.on('message', (res) => {
|
||||
if (res.error === 0) {
|
||||
const { message, sender } = res.data;
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
|
||||
// 告诉父级页面
|
||||
// window.parent.postMessage({
|
||||
// chatDotNum: ++state.chatDotNum
|
||||
// })
|
||||
callBack && callBack();
|
||||
}
|
||||
});
|
||||
// 监听客服接入成功
|
||||
SocketIo.on('customer_service_access', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'online',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
// callBack && callBack()
|
||||
}
|
||||
});
|
||||
// 监听排队等待
|
||||
SocketIo.on('waiting_queue', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.title,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
// callBack && callBack()
|
||||
}
|
||||
});
|
||||
// 监听没有客服在线
|
||||
SocketIo.on('no_customer_service', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: '暂无客服在线...',
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
}
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
// callBack && callBack()
|
||||
});
|
||||
// 监听客服上线
|
||||
SocketIo.on('customer_service_online', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'online',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 监听客服下线
|
||||
SocketIo.on('customer_service_offline', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'offline',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 监听客服忙碌
|
||||
SocketIo.on('customer_service_busy', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'busy',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 监听客服断开链接
|
||||
SocketIo.on('customer_service_break', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: '客服服务结束',
|
||||
state: 'offline',
|
||||
avatar: '',
|
||||
});
|
||||
state.socketState.isConnect = false;
|
||||
state.socketState.tip = '当前服务已结束';
|
||||
}
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
// callBack && callBack()
|
||||
});
|
||||
// 监听自定义错误 custom_error
|
||||
SocketIo.on('custom_error', (error) => {
|
||||
editCustomerServerInfo({
|
||||
title: error.msg,
|
||||
state: 'offline',
|
||||
avatar: '',
|
||||
});
|
||||
console.log('custom_error:', error);
|
||||
});
|
||||
// 监听错误 error
|
||||
SocketIo.on('error', (error) => {
|
||||
console.log('error:', error);
|
||||
});
|
||||
// 重连失败 connect_error
|
||||
SocketIo.on('connect_error', (error) => {
|
||||
console.log('connect_error');
|
||||
});
|
||||
// 连接上，但无反应 connect_timeout
|
||||
SocketIo.on('connect_timeout', (error) => {
|
||||
console.log(error, 'connect_timeout');
|
||||
});
|
||||
// 服务进程销毁 disconnect
|
||||
SocketIo.on('disconnect', (error) => {
|
||||
console.log(error, 'disconnect');
|
||||
});
|
||||
// 服务重启重连上reconnect
|
||||
SocketIo.on('reconnect', (error) => {
|
||||
console.log(error, 'reconnect');
|
||||
});
|
||||
// 开始重连reconnect_attempt
|
||||
SocketIo.on('reconnect_attempt', (error) => {
|
||||
state.socketState.isConnect = false;
|
||||
state.socketState.isConnecting = true;
|
||||
editCustomerServerInfo({
|
||||
title: `重连中，第${error}次尝试...`,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
console.log(error, 'reconnect_attempt');
|
||||
});
|
||||
// 重新连接中reconnecting
|
||||
SocketIo.on('reconnecting', (error) => {
|
||||
console.log(error, 'reconnecting');
|
||||
});
|
||||
// 重新连接错误reconnect_error
|
||||
SocketIo.on('reconnect_error', (error) => {
|
||||
console.log('reconnect_error');
|
||||
});
|
||||
// 重新连接失败reconnect_failed
|
||||
SocketIo.on('reconnect_failed', (error) => {
|
||||
state.socketState.isConnecting = false;
|
||||
editCustomerServerInfo({
|
||||
title: `重连失败，请刷新重试~`,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
console.log(error, 'reconnect_failed');
|
||||
|
||||
// setTimeout(() => {
|
||||
state.isSendSucces = 1;
|
||||
// }, 500)
|
||||
});
|
||||
};
|
||||
|
||||
// 重置socket
|
||||
const socketReset = (callBack) => {
|
||||
state.chatList = [];
|
||||
state.chatHistoryList = [];
|
||||
state.chatHistoryPagination = {
|
||||
page: 0,
|
||||
per_page: 10,
|
||||
last_id: 0,
|
||||
totalPage: 0,
|
||||
};
|
||||
socketConnection(callBack); // 连接
|
||||
};
|
||||
|
||||
// 退出连接
|
||||
const socketClose = () => {
|
||||
SocketIo.emit('customer_logout', {}, (res) => {
|
||||
console.log('socket:退出', res);
|
||||
});
|
||||
};
|
||||
|
||||
// 测试事件
|
||||
const socketTest = () => {
|
||||
SocketIo.emit('test', {}, (res) => {
|
||||
console.log('test:test', res);
|
||||
});
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
const socketSendMsg = (data, sendMsgCallBack) => {
|
||||
state.isSendSucces = -1;
|
||||
state.chatList.push(data);
|
||||
sendMsgCallBack && sendMsgCallBack();
|
||||
SocketIo.emit(
|
||||
'message',
|
||||
{
|
||||
message: formatInput(data),
|
||||
...data.customData,
|
||||
},
|
||||
(res) => {
|
||||
// setTimeout(() => {
|
||||
state.isSendSucces = res.error;
|
||||
// }, 500)
|
||||
|
||||
// console.log(res, 'socket:send');
|
||||
// sendMsgCallBack && sendMsgCallBack()
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 连接socket,存入sessionId
|
||||
const socketConnection = (callBack) => {
|
||||
SocketIo.emit(
|
||||
'connection',
|
||||
{
|
||||
auth: 'user',
|
||||
token: uni.getStorageSync('socketUserToken') || '',
|
||||
session_id: uni.getStorageSync('socketSessionId') || '',
|
||||
},
|
||||
(res) => {
|
||||
if (res.error === 0) {
|
||||
socketCustomerLogin(callBack);
|
||||
uni.setStorageSync('socketSessionId', res.data.session_id);
|
||||
// uni.getStorageSync('socketUserToken') && socketLogin(uni.getStorageSync(
|
||||
// 'socketUserToken')) // 如果有用户token,绑定
|
||||
state.customerUserInfo = res.data.chat_user;
|
||||
state.socketState.isConnect = true;
|
||||
} else {
|
||||
editCustomerServerInfo({
|
||||
title: `服务器异常！`,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
state.socketState.isConnect = false;
|
||||
}
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 用户id,获取token
|
||||
const getUserToken = async (id) => {
|
||||
const res = await chat.unifiedToken();
|
||||
if (res.error === 0) {
|
||||
uni.setStorageSync('socketUserToken', res.data.token);
|
||||
// SocketIo && SocketIo.connected && socketLogin(res.data.token)
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
// 用户登录
|
||||
const socketLogin = (token) => {
|
||||
SocketIo.emit(
|
||||
'login',
|
||||
{
|
||||
token: token,
|
||||
},
|
||||
(res) => {
|
||||
console.log(res, 'socket:login');
|
||||
state.customerUserInfo = res.data.chat_user;
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 顾客登录
|
||||
const socketCustomerLogin = (callBack) => {
|
||||
SocketIo.emit(
|
||||
'customer_login',
|
||||
{
|
||||
room_id: state.chatConfig.room_id,
|
||||
},
|
||||
(res) => {
|
||||
state.templateChatList = res.data.questions.length ? res.data.questions : [];
|
||||
state.chatList.push({
|
||||
from: 'customer_service', // 用户customer右 | 顾客customer_service左 | 系统system中间
|
||||
mode: 'template', // goods,order,image,text,system
|
||||
date: new Date().getTime(), //时间
|
||||
content: {
|
||||
//内容
|
||||
list: state.templateChatList,
|
||||
},
|
||||
});
|
||||
res.error === 0 && socketHistoryList(callBack);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 获取历史消息
|
||||
const socketHistoryList = (historyCallBack) => {
|
||||
state.chatHistoryPagination.loadStatus = 'loading';
|
||||
state.chatHistoryPagination.page += 1;
|
||||
SocketIo.emit('messages', state.chatHistoryPagination, (res) => {
|
||||
if (res.error === 0) {
|
||||
state.chatHistoryPagination.total = res.data.messages.total;
|
||||
state.chatHistoryPagination.lastPage = res.data.messages.last_page;
|
||||
state.chatHistoryPagination.page = res.data.messages.current_page;
|
||||
res.data.messages.data.forEach((item) => {
|
||||
item.message_type && state.chatList.unshift(formatMessage(item));
|
||||
});
|
||||
state.chatHistoryPagination.loadStatus =
|
||||
state.chatHistoryPagination.page < state.chatHistoryPagination.lastPage
|
||||
? 'loadmore'
|
||||
: 'nomore';
|
||||
if (state.chatHistoryPagination.last_id == 0) {
|
||||
state.chatHistoryPagination.last_id = res.data.messages.data.length
|
||||
? res.data.messages.data[0].id
|
||||
: 0;
|
||||
}
|
||||
state.chatHistoryPagination.page === 1 && historyCallBack && historyCallBack();
|
||||
}
|
||||
|
||||
// 历史记录之后，猜你想问
|
||||
// state.chatList.push({
|
||||
// from: 'customer_service', // 用户customer右 | 顾客customer_service左 | 系统system中间
|
||||
// mode: 'template', // goods,order,image,text,system
|
||||
// date: new Date().getTime(), //时间
|
||||
// content: { //内容
|
||||
// list: state.templateChatList
|
||||
// }
|
||||
// })
|
||||
});
|
||||
};
|
||||
|
||||
// 修改客服信息
|
||||
const editCustomerServerInfo = (data) => {
|
||||
state.customerServerInfo = {
|
||||
...state.customerServerInfo,
|
||||
...data,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* ================
|
||||
* 工具函数 ↓
|
||||
* ===============
|
||||
*/
|
||||
|
||||
/**
|
||||
* 是否显示时间
|
||||
* @param {*} item - 数据
|
||||
* @param {*} index - 索引
|
||||
*/
|
||||
const showTime = (item, index) => {
|
||||
if (unref(state.chatList)[index + 1]) {
|
||||
let dateString = dayjs(unref(state.chatList)[index + 1].date).fromNow();
|
||||
if (dateString === dayjs(unref(item).date).fromNow()) {
|
||||
return false;
|
||||
} else {
|
||||
dateString = dayjs(unref(item).date).fromNow();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化时间
|
||||
* @param {*} time - 时间戳
|
||||
*/
|
||||
const formatTime = (time) => {
|
||||
let diffTime = new Date().getTime() - time;
|
||||
if (diffTime > 28 * 24 * 60 * 1000) {
|
||||
return dayjs(time).format('MM/DD HH:mm');
|
||||
}
|
||||
if (diffTime > 360 * 28 * 24 * 60 * 1000) {
|
||||
return dayjs(time).format('YYYY/MM/DD HH:mm');
|
||||
}
|
||||
return dayjs(time).fromNow();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取焦点
|
||||
* @param {*} virtualNode - 节点信息 ref
|
||||
*/
|
||||
const getFocus = (virtualNode) => {
|
||||
if (window.getSelection) {
|
||||
let chatInput = unref(virtualNode);
|
||||
chatInput.focus();
|
||||
let range = window.getSelection();
|
||||
range.selectAllChildren(chatInput);
|
||||
range.collapseToEnd();
|
||||
} else if (document.selection) {
|
||||
let range = document.selection.createRange();
|
||||
range.moveToElementText(chatInput);
|
||||
range.collapse(false);
|
||||
range.select();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @param {Blob} file -文件数据流
|
||||
* @return {path,fullPath}
|
||||
*/
|
||||
|
||||
const upload = (name, file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let data = new FormData();
|
||||
data.append('file', file, name);
|
||||
data.append('group', 'chat');
|
||||
ajax({
|
||||
url: '/upload',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
data,
|
||||
success: function (res) {
|
||||
resolve(res);
|
||||
},
|
||||
error: function (err) {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 粘贴到输入框
|
||||
* @param {*} e - 粘贴内容
|
||||
* @param {*} uploadHttp - 上传图片地址
|
||||
*/
|
||||
const onPaste = async (e) => {
|
||||
let paste = e.clipboardData || window.clipboardData;
|
||||
let filesArr = Array.from(paste.files);
|
||||
filesArr.forEach(async (child) => {
|
||||
if (child && child.type.includes('image')) {
|
||||
e.preventDefault(); //阻止默认
|
||||
let file = child;
|
||||
const img = await readImg(file);
|
||||
const blob = await compressImg(img, file.type);
|
||||
const { data } = await upload(file.name, blob);
|
||||
let image = `<img src='${data.fullurl}' style='object-fit: cover;width:100px;height:100px;border-radius:6px'>`;
|
||||
document.execCommand('insertHTML', false, image);
|
||||
} else {
|
||||
document.execCommand('insertHTML', false, paste.getData('text'));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 拖拽到输入框
|
||||
* @param {*} e - 粘贴内容
|
||||
* @param {*} uploadHttp - 上传图片地址
|
||||
*/
|
||||
const onDrop = async (e) => {
|
||||
e.preventDefault(); //阻止默认
|
||||
let filesArr = Array.from(e.dataTransfer.files);
|
||||
filesArr.forEach(async (child) => {
|
||||
if (child && child.type.includes('image')) {
|
||||
let file = child;
|
||||
const img = await readImg(file);
|
||||
const blob = await compressImg(img, file.type);
|
||||
const { data } = await upload(file.name, blob);
|
||||
let image = `<img src='${data.fullurl}' style='object-fit: cover;width:100px;height:100px;border-radius:6px'>`;
|
||||
document.execCommand('insertHTML', false, image);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '禁止拖拽非图片资源',
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析富文本输入框内容
|
||||
* @param {*} virtualNode -节点信息
|
||||
* @param {Function} formatInputCallBack - cb 回调
|
||||
*/
|
||||
const formatChatInput = (virtualNode, formatInputCallBack) => {
|
||||
let res = '';
|
||||
let elemArr = Array.from(virtualNode.childNodes);
|
||||
elemArr.forEach((child, index) => {
|
||||
if (child.nodeName === '#text') {
|
||||
//如果为文本节点
|
||||
res += child.nodeValue;
|
||||
if (
|
||||
//文本节点的后面是图片，并且不是emoji,分开发送。输入框中的图片和文本表情分开。
|
||||
elemArr[index + 1] &&
|
||||
elemArr[index + 1].nodeName === 'IMG' &&
|
||||
elemArr[index + 1] &&
|
||||
elemArr[index + 1].name !== 'emoji'
|
||||
) {
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: filterXSS(res),
|
||||
},
|
||||
};
|
||||
formatInputCallBack && formatInputCallBack(data);
|
||||
res = '';
|
||||
}
|
||||
} else if (child.nodeName === 'BR') {
|
||||
res += '<br/>';
|
||||
} else if (child.nodeName === 'IMG') {
|
||||
// 有emjio 和 一般图片
|
||||
// 图片解析后直接发送，不跟文字表情一组
|
||||
if (child.name !== 'emoji') {
|
||||
let srcReg = /src=[\'\']?([^\'\']*)[\'\']?/i;
|
||||
let src = child.outerHTML.match(srcReg);
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'image',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
url: src[1],
|
||||
path: src[1].replace(/http:\/\/[^\/]*/, ''),
|
||||
},
|
||||
};
|
||||
formatInputCallBack && formatInputCallBack(data);
|
||||
} else {
|
||||
// 非表情图片跟文字一起发送
|
||||
res += child.outerHTML;
|
||||
}
|
||||
} else if (child.nodeName === 'DIV') {
|
||||
res += `<div style='width:200px; white-space: nowrap;'>${child.outerHTML}</div>`;
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: filterXSS(res),
|
||||
},
|
||||
};
|
||||
formatInputCallBack && formatInputCallBack(data);
|
||||
}
|
||||
unref(virtualNode).innerHTML = '';
|
||||
};
|
||||
|
||||
/**
|
||||
* 状态回调
|
||||
* @param {*} res -接口返回数据
|
||||
*/
|
||||
const callBackNotice = (res) => {
|
||||
ElNotification({
|
||||
title: 'socket',
|
||||
message: res.msg,
|
||||
showClose: true,
|
||||
type: res.error === 0 ? 'success' : 'warning',
|
||||
duration: 1200,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化发送信息
|
||||
* @param {Object} message
|
||||
* @returns obj - 消息对象
|
||||
*/
|
||||
const formatInput = (message) => {
|
||||
let obj = {};
|
||||
switch (message.mode) {
|
||||
case 'text':
|
||||
obj = {
|
||||
message_type: 'text',
|
||||
message: message.content.text,
|
||||
};
|
||||
break;
|
||||
case 'image':
|
||||
obj = {
|
||||
message_type: 'image',
|
||||
message: message.content.path,
|
||||
};
|
||||
break;
|
||||
case 'goods':
|
||||
obj = {
|
||||
message_type: 'goods',
|
||||
message: message.content.item,
|
||||
};
|
||||
break;
|
||||
case 'order':
|
||||
obj = {
|
||||
message_type: 'order',
|
||||
message: message.content.item,
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
/**
|
||||
* 格式化接收信息
|
||||
* @param {*} message
|
||||
* @returns obj - 消息对象
|
||||
*/
|
||||
const formatMessage = (message) => {
|
||||
let obj = {};
|
||||
switch (message.message_type) {
|
||||
case 'system':
|
||||
obj = {
|
||||
from: 'system', // 用户customer左 | 顾客customer_service右 | 系统system中间
|
||||
mode: 'system', // goods,order,image,text,system
|
||||
date: message.create_time * 1000, //时间
|
||||
content: {
|
||||
//内容
|
||||
text: message.message,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'text':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
text: message.message,
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'image':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
url: sheep.$url.cdn(message.message),
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'goods':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
item: message.message,
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'order':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
item: message.message,
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
/**
|
||||
* file 转换为 img
|
||||
* @param {*} file - file 文件
|
||||
* @returns img - img标签
|
||||
*/
|
||||
const readImg = (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
img.src = e.target.result;
|
||||
};
|
||||
reader.onerror = function (e) {
|
||||
reject(e);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
img.onload = function () {
|
||||
resolve(img);
|
||||
};
|
||||
img.onerror = function (e) {
|
||||
reject(e);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 压缩图片
|
||||
*@param img -被压缩的img对象
|
||||
* @param type -压缩后转换的文件类型
|
||||
* @param mx -触发压缩的图片最大宽度限制
|
||||
* @param mh -触发压缩的图片最大高度限制
|
||||
* @returns blob - 文件流
|
||||
*/
|
||||
const compressImg = (img, type = 'image/jpeg', mx = 1000, mh = 1000, quality = 1) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
const { width: originWidth, height: originHeight } = img;
|
||||
// 最大尺寸限制
|
||||
const maxWidth = mx;
|
||||
const maxHeight = mh;
|
||||
// 目标尺寸
|
||||
let targetWidth = originWidth;
|
||||
let targetHeight = originHeight;
|
||||
if (originWidth > maxWidth || originHeight > maxHeight) {
|
||||
if (originWidth / originHeight > 1) {
|
||||
// 宽图片
|
||||
targetWidth = maxWidth;
|
||||
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
||||
} else {
|
||||
// 高图片
|
||||
targetHeight = maxHeight;
|
||||
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
||||
}
|
||||
}
|
||||
canvas.width = targetWidth;
|
||||
canvas.height = targetHeight;
|
||||
context.clearRect(0, 0, targetWidth, targetHeight);
|
||||
// 图片绘制
|
||||
context.drawImage(img, 0, 0, targetWidth, targetHeight);
|
||||
canvas.toBlob(
|
||||
function (blob) {
|
||||
resolve(blob);
|
||||
},
|
||||
type,
|
||||
quality,
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
compressImg,
|
||||
readImg,
|
||||
formatMessage,
|
||||
formatInput,
|
||||
callBackNotice,
|
||||
|
||||
socketInit,
|
||||
socketSendMsg,
|
||||
socketClose,
|
||||
socketHistoryList,
|
||||
|
||||
getFocus,
|
||||
formatChatInput,
|
||||
onDrop,
|
||||
onPaste,
|
||||
upload,
|
||||
|
||||
getUserToken,
|
||||
|
||||
state,
|
||||
|
||||
socketTest,
|
||||
|
||||
showTime,
|
||||
formatTime,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
<!-- 申请分销商 -->
|
||||
<template>
|
||||
<s-layout title="申请分销商" class="apply-wrap" navbar="inner">
|
||||
<s-empty
|
||||
v-if="state.error === 1"
|
||||
paddingTop="0"
|
||||
icon="/static/comment-empty.png"
|
||||
text="未开启分销商申请"
|
||||
></s-empty>
|
||||
|
||||
<view v-if="state.error === 0" class="distribution-apply-wrap">
|
||||
<view class="apply-header">
|
||||
<view class="header-box ss-flex">
|
||||
<image
|
||||
class="bg-img"
|
||||
:src="sheep.$url.cdn(state.background)"
|
||||
mode="widthFix"
|
||||
@load="onImgLoad"
|
||||
></image>
|
||||
<view class="heaer-title">申请分销商</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="apply-box bg-white" :style="{ marginTop: state.imgHeight + 'rpx' }">
|
||||
<uni-forms
|
||||
label-width="200"
|
||||
:model="state.model"
|
||||
:rules="state.rules"
|
||||
border
|
||||
class="form-box"
|
||||
>
|
||||
<view class="item-box">
|
||||
<uni-forms-item
|
||||
v-for="(item, index) in state.formList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:required="true"
|
||||
:label-position="item.type == 'image' ? 'top' : 'left'"
|
||||
>
|
||||
<uni-easyinput
|
||||
v-if="item.type !== 'image'"
|
||||
:inputBorder="false"
|
||||
:type="item.type"
|
||||
:styles="{ disableColor: '#fff' }"
|
||||
placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
|
||||
v-model="item.value"
|
||||
:placeholder="`请填写${item.name}`"
|
||||
/>
|
||||
<s-uploader
|
||||
v-if="item.type === 'image'"
|
||||
v-model="item.aaa"
|
||||
v-model:url="item.value"
|
||||
fileMediatype="image"
|
||||
limit="1"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
class="file-picker"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<label class="ss-flex ss-m-t-20" @tap="onChange" v-if="state.protocol?.status == 1">
|
||||
<radio :checked="state.isAgree" color="var(--ui-BG-Main)" style="transform: scale(0.6)" />
|
||||
<view class="agreement-text ss-flex">
|
||||
<view class="ss-m-r-4">勾选代表同意</view>
|
||||
<view
|
||||
class="tcp-text"
|
||||
@tap.stop="
|
||||
sheep.$router.go('/pages/public/richtext', {
|
||||
id: state.protocol.id,
|
||||
title: state.protocol.title,
|
||||
})
|
||||
"
|
||||
>
|
||||
《{{ state.protocol.title }}》
|
||||
</view>
|
||||
</view>
|
||||
</label>
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="submit-box ss-flex ss-row-center ss-p-30">
|
||||
<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="submit">
|
||||
{{ submitText }}
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
error: -1,
|
||||
status: '-',
|
||||
config: {},
|
||||
isAgree: false,
|
||||
formList: [],
|
||||
protocol: {},
|
||||
applyInfo: [],
|
||||
background: '',
|
||||
imgHeight: 400,
|
||||
});
|
||||
|
||||
//勾选协议
|
||||
function onChange() {
|
||||
state.isAgree = !state.isAgree;
|
||||
}
|
||||
|
||||
const submitText = computed(() => {
|
||||
if (state.status === 'normal') return '修改信息';
|
||||
if (state.status === 'needinfo') return '提交审核';
|
||||
if (state.status === 'reject') return '重新提交';
|
||||
return '';
|
||||
});
|
||||
|
||||
async function getAgentForm() {
|
||||
const { error, data } = await sheep.$api.commission.form();
|
||||
state.error = error;
|
||||
if (error === 0) {
|
||||
state.status = data.status;
|
||||
state.background = data.background;
|
||||
state.formList = data.form;
|
||||
state.applyInfo = data.applyInfo;
|
||||
state.protocol = data.protocol;
|
||||
|
||||
if (data.protocol.status != 1) {
|
||||
state.isAgree = true;
|
||||
}
|
||||
mergeFormList();
|
||||
}
|
||||
}
|
||||
function onImgLoad(e) {
|
||||
state.imgHeight = (e.detail.height / e.detail.width) * 750 - 88;
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!state.isAgree) {
|
||||
sheep.$helper.toast('请同意申请协议');
|
||||
return;
|
||||
}
|
||||
|
||||
const validate = state.formList.every((item) => {
|
||||
if (isEmpty(item.value)) {
|
||||
if (item.type !== 'image') {
|
||||
sheep.$helper.toast(`请填写${item.name}`);
|
||||
} else {
|
||||
sheep.$helper.toast(`请上传${item.name}`);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (!validate) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await sheep.$api.commission.apply({
|
||||
data: state.formList,
|
||||
});
|
||||
if (error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getAgentForm();
|
||||
});
|
||||
|
||||
// 初始化formData
|
||||
function mergeFormList() {
|
||||
state.formList.forEach((form) => {
|
||||
const apply = state.applyInfo.find(
|
||||
(info) => info.type === form.type && info.name === form.name,
|
||||
);
|
||||
if (typeof apply !== 'undefined') form.value = apply.value;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-forms-item__label .label-text {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.file-picker__progress {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.distribution-apply-wrap {
|
||||
// height: 100vh;
|
||||
// width: 100vw;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// background-color: #fff;
|
||||
// overflow-y: auto;
|
||||
|
||||
.submit-btn {
|
||||
width: 690px;
|
||||
height: 86rpx;
|
||||
border-radius: 43rpx;
|
||||
}
|
||||
.apply-header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.header-box {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.bg-img {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.heaer-title {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
z-index: 11;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 51rpx;
|
||||
height: 8rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 4rpx;
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
bottom: -20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apply-box {
|
||||
padding: 0 40rpx;
|
||||
|
||||
.item-box {
|
||||
border-bottom: 2rpx solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #c4c4c4;
|
||||
line-height: normal;
|
||||
|
||||
.tcp-text {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!-- 账户 -->
|
||||
<template>
|
||||
<view class="account-card">
|
||||
<view class="account-card-box">
|
||||
<view class="ss-flex ss-row-between card-box-header">
|
||||
<view class="ss-flex">
|
||||
<view class="header-title ss-m-r-16">账户信息</view>
|
||||
<button
|
||||
class="ss-reset-button look-btn ss-flex"
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
>
|
||||
<uni-icons
|
||||
:type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
|
||||
color="#A57A55"
|
||||
size="20"
|
||||
></uni-icons>
|
||||
</button>
|
||||
</view>
|
||||
<view class="ss-flex" @tap="sheep.$router.go('/pages/user/wallet/commission')">
|
||||
<view class="header-title ss-m-r-4">查看明细</view>
|
||||
<text class="cicon-play-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 收益 -->
|
||||
<view class="card-content ss-flex">
|
||||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||||
<view class="item-title">总收益(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? agentInfo.total_income || '0.00' : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||||
<view class="item-title">我的佣金(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? userInfo.commission || '0.00' : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||||
<view class="item-title">我的消费(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? userInfo.total_consume || '0.00' : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account-card {
|
||||
width: 694rpx;
|
||||
margin: 0 auto;
|
||||
padding: 2rpx;
|
||||
background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
|
||||
border-radius: 12rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
.account-card-box {
|
||||
background: #ffefd6;
|
||||
.card-box-header {
|
||||
padding: 0 30rpx;
|
||||
height: 72rpx;
|
||||
box-shadow: 0px 2px 6px #f2debe;
|
||||
.header-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #a17545;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.cicon-play-arrow {
|
||||
color: #a17545;
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.card-content {
|
||||
height: 190rpx;
|
||||
background: #fdfae9;
|
||||
.item-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #cba67e;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.item-detail {
|
||||
font-size: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: bold;
|
||||
color: #692e04;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,184 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<su-popup
|
||||
:show="state.show"
|
||||
type="center"
|
||||
round="10"
|
||||
@close="state.show = false"
|
||||
:isMaskClick="false"
|
||||
maskBackgroundColor="rgba(0, 0, 0, 0.7)"
|
||||
>
|
||||
<view class="notice-box">
|
||||
<view class="img-wrap">
|
||||
<image
|
||||
class="notice-img"
|
||||
:src="sheep.$url.static(state.event.image)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="notice-title">{{ state.event.title }}</view>
|
||||
<view class="notice-detail">{{ state.event.subtitle }}</view>
|
||||
<button
|
||||
class="ss-reset-button notice-btn ui-Shadow-Main ui-BG-Main-Gradient"
|
||||
@tap="onTap(state.event.action)"
|
||||
>
|
||||
{{ state.event.button }}
|
||||
</button>
|
||||
<button class="ss-reset-button back-btn" @tap="sheep.$router.back()"> 返回 </button>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
error: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['getAgentInfo']);
|
||||
const state = reactive({
|
||||
event: {},
|
||||
show: false,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.error,
|
||||
(error) => {
|
||||
if (error !== 0 && error !== 100) {
|
||||
state.event = eventMap[error];
|
||||
state.show = true;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
async function onTap(eventName) {
|
||||
switch (eventName) {
|
||||
case 'back': // 返回
|
||||
sheep.$router.back();
|
||||
break;
|
||||
case 'apply': // 需提交资料
|
||||
sheep.$router.go('/pages/commission/apply');
|
||||
break;
|
||||
case 'reApply': // 直接重新申请
|
||||
let { error } = await sheep.$api.commission.apply();
|
||||
if (error === 0) {
|
||||
emits('getAgentInfo');
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
const eventMap = {
|
||||
// 关闭
|
||||
101: {
|
||||
image: '/static/img/shop/commission/close.png',
|
||||
title: '分销中心已关闭',
|
||||
subtitle: '该功能暂不可用',
|
||||
button: '知道了',
|
||||
action: 'back',
|
||||
},
|
||||
// 禁用
|
||||
102: {
|
||||
image: '/static/img/shop/commission/forbidden.png',
|
||||
title: '账户已被禁用',
|
||||
subtitle: '该功能暂不可用',
|
||||
button: '知道了',
|
||||
action: 'back',
|
||||
},
|
||||
// 补充信息
|
||||
103: {
|
||||
image: '/static/img/shop/commission/apply.png',
|
||||
title: '待完善信息',
|
||||
subtitle: '请补充您的信息后提交审核',
|
||||
button: '完善信息',
|
||||
action: 'apply',
|
||||
},
|
||||
// 审核中
|
||||
104: {
|
||||
image: '/static/img/shop/commission/pending.png',
|
||||
title: '正在审核中',
|
||||
subtitle: '请耐心等候结果',
|
||||
button: '知道了',
|
||||
action: 'back',
|
||||
},
|
||||
// 重新提交
|
||||
105: {
|
||||
image: '/static/img/shop/commission/reject.png',
|
||||
title: '抱歉!您的申请信息未通过',
|
||||
subtitle: '请尝试修改后重新提交',
|
||||
button: '重新申请',
|
||||
action: 'apply',
|
||||
},
|
||||
// 直接重新申请
|
||||
106: {
|
||||
image: '/static/img/shop/commission/reject.png',
|
||||
title: '抱歉!您的申请未通过',
|
||||
subtitle: '请尝试重新申请',
|
||||
button: '重新申请',
|
||||
action: 'reApply',
|
||||
},
|
||||
// 冻结
|
||||
107: {
|
||||
image: '/static/img/shop/commission/freeze.png',
|
||||
title: '抱歉!您的账户已被冻结',
|
||||
subtitle: '如有疑问请联系客服',
|
||||
button: '联系客服',
|
||||
action: 'chat',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
width: 612rpx;
|
||||
min-height: 658rpx;
|
||||
background: #ffffff;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
.img-wrap {
|
||||
margin-bottom: 50rpx;
|
||||
.notice-img {
|
||||
width: 180rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
}
|
||||
.notice-title {
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
.notice-detail {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.notice-btn {
|
||||
width: 492rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.back-btn {
|
||||
width: 492rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main-gradient);
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<su-popup
|
||||
:show="state.show"
|
||||
type="bottom"
|
||||
round="10"
|
||||
:isMaskClick="false"
|
||||
:backgroundImage="sheep.$url.static('/static/img/shop/commission/become-agent.png')"
|
||||
@close="show = false"
|
||||
backgroundColor="var(--ui-BG-Main)"
|
||||
>
|
||||
<view class="model-box ss-flex ss-row-center">
|
||||
<view class="content">
|
||||
<scroll-view
|
||||
class="scroll-box"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="true"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view v-if="errorData.type === 'goods'">
|
||||
<view class="item-box ss-m-b-20" v-for="item in errorData.value" :key="item.id">
|
||||
<s-goods-item :title="item.title" :img="item.image">
|
||||
<template #groupon>
|
||||
<view class="item-box-subtitle">{{ item.subtitle }}</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<s-goods-item
|
||||
title="累计消费满"
|
||||
price=""
|
||||
:img="sheep.$url.static('/static/img/shop/commission/consume.png')"
|
||||
v-else-if="errorData.type === 'consume'"
|
||||
>
|
||||
<template #groupon>
|
||||
<view class="ss-flex">
|
||||
<view class="progress-box ss-flex">
|
||||
<view
|
||||
class="progerss-active"
|
||||
:style="{
|
||||
width: state.percent < 10 ? '10%' : state.percent + '%',
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
<view class="progress-title ss-m-l-10">{{ errorData.value }}元</view>
|
||||
</view>
|
||||
<view class="progress-title ss-m-t-20">{{ userInfo.total_consume }}元</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</scroll-view>
|
||||
<view class="content-des" v-if="errorData.type === 'goods'"
|
||||
>* 购买指定商品即可成为分销商</view
|
||||
>
|
||||
<view class="content-des" v-else-if="errorData.type === 'consume'"
|
||||
>* 满足累计消费即可成为分销商</view
|
||||
>
|
||||
</view>
|
||||
<button class="ss-reset-button go-btn ui-BG-Main-Gradient" @tap="sheep.$router.back()">
|
||||
返回
|
||||
</button>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
const props = defineProps({
|
||||
error: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
errorData: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
const state = reactive({
|
||||
percent: computed(() => {
|
||||
if (props.errorData.type !== 'consume') {
|
||||
return 0;
|
||||
}
|
||||
let percent = (userInfo.value.total_consume / props.errorData.value) * 100;
|
||||
return parseInt(percent);
|
||||
}),
|
||||
show: false,
|
||||
money: '',
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.error,
|
||||
(error) => {
|
||||
if (error == 100) {
|
||||
state.show = true;
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.ss-goods-item-warp {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.progress-box {
|
||||
flex: 1;
|
||||
height: 18rpx;
|
||||
background: #e7e7e7;
|
||||
border-radius: 9rpx;
|
||||
}
|
||||
|
||||
.progerss-active {
|
||||
height: 24rpx;
|
||||
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.model-box {
|
||||
padding: 140rpx 40rpx 60rpx 40rpx;
|
||||
height: 916rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
height: 720rpx;
|
||||
width: 612rpx;
|
||||
padding-top: 30rpx;
|
||||
// background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content-des {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
height: 620rpx;
|
||||
}
|
||||
.item-box-subtitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.go-btn {
|
||||
width: 600rpx;
|
||||
height: 70rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 120rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!-- 分销商信息 -->
|
||||
<template>
|
||||
<!-- 用户资料 -->
|
||||
<view class="user-card ss-flex ss-col-bottom">
|
||||
<view class="card-top ss-flex ss-row-between">
|
||||
<view class="ss-flex">
|
||||
<view class="head-img-box">
|
||||
<image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="ss-flex-col">
|
||||
<view class="user-name">{{ userInfo.nickname }}</view>
|
||||
<view class="user-info-box ss-flex">
|
||||
<view class="tag-box ss-flex" v-if="agentInfo.level_info">
|
||||
<image
|
||||
v-if="agentInfo.level_info?.image"
|
||||
class="tag-img"
|
||||
:src="sheep.$url.cdn(agentInfo.level_info?.image)"
|
||||
mode="aspectFill"
|
||||
>
|
||||
</image>
|
||||
<text class="tag-title">{{ agentInfo.level_info?.name }}</text>
|
||||
</view>
|
||||
<view class="ss-iconfont uicon-arrow-right" style="color: #fff; font-size: 28rpx">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 用户资料卡片
|
||||
.user-card {
|
||||
width: 690rpx;
|
||||
height: 192rpx;
|
||||
margin: -88rpx 20rpx 0 20rpx;
|
||||
padding-top: 88rpx;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/commission/background.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.head-img-box {
|
||||
margin-right: 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background: #fce0ad;
|
||||
|
||||
.head-img {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.card-top {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 34rpx;
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #692e04;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.log-btn {
|
||||
width: 84rpx;
|
||||
height: 42rpx;
|
||||
border: 2rpx solid rgba(#ffffff, 0.33);
|
||||
border-radius: 21rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.look-btn {
|
||||
color: #fff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
.tag-box {
|
||||
background: #ff6000;
|
||||
border-radius: 18rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.tag-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
margin-left: -2rpx;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 24rpx;
|
||||
padding: 0 10rpx;
|
||||
font-weight: 500;
|
||||
line-height: 36rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!-- 分销明细 -->
|
||||
<template>
|
||||
<view class="distribution-log-wrap">
|
||||
<view class="header-box">
|
||||
<image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title2.png')" />
|
||||
<view class="ss-flex header-title">
|
||||
<view class="title">实时动态</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
@scrolltolower="loadmore"
|
||||
class="scroll-box log-scroll"
|
||||
scroll-with-animation="true"
|
||||
>
|
||||
<view
|
||||
class="log-item-box ss-flex ss-row-between"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="log-item-wrap">
|
||||
<view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
v-if="item.oper_type === 'user'"
|
||||
class="log-img"
|
||||
:src="sheep.$url.cdn(item.oper?.avatar)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else-if="item.oper_type === 'admin'"
|
||||
class="log-img"
|
||||
:src="sheep.$url.static('/static/img/shop/avatar/default_user.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="log-img"
|
||||
:src="sheep.$url.static('/static/img/shop/avatar/notice.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="log-text ss-ellipsis-1">{{ item.remark }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="log-time">{{ dayjs(item.create_time).fromNow() }}</text>
|
||||
</view>
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
color="#333333"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const state = reactive({
|
||||
loadStatus: '',
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
});
|
||||
|
||||
async function getLog(page = 1) {
|
||||
const res = await sheep.$api.commission.log({
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let list = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: list,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
getLog();
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getLog(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distribution-log-wrap {
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
.header-box {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
position: relative;
|
||||
.header-bg {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
.header-title {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.cicon-forward {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.log-scroll {
|
||||
height: 600rpx;
|
||||
background: #fdfae9;
|
||||
padding: 10rpx 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
|
||||
.log-item-box {
|
||||
margin-bottom: 20rpx;
|
||||
.log-time {
|
||||
// margin-left: 30rpx;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.loadmore-wrap {
|
||||
// line-height: 80rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
// background: rgba(#ffffff, 0.2);
|
||||
border-radius: 24rpx;
|
||||
padding: 6rpx 20rpx 6rpx 12rpx;
|
||||
|
||||
.log-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.log-text {
|
||||
max-width: 480rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<!-- 分销商菜单栏 -->
|
||||
<template>
|
||||
<view class="menu-box ss-flex-col">
|
||||
<view class="header-box">
|
||||
<image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title1.png')" />
|
||||
<view class="ss-flex header-title">
|
||||
<view class="title">功能专区</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-list ss-flex ss-flex-wrap">
|
||||
<view
|
||||
v-for="(item, index) in state.menuList"
|
||||
:key="index"
|
||||
class="item-box ss-flex-col ss-col-center"
|
||||
@tap="sheep.$router.go(item.path)"
|
||||
>
|
||||
<image
|
||||
class="menu-icon ss-m-b-10"
|
||||
:src="sheep.$url.static(item.img)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <uni-grid :column="4" :showBorder="false" :highlight="false">
|
||||
<uni-grid-item
|
||||
v-for="(item, index) in state.menuList"
|
||||
:index="index"
|
||||
:key="index"
|
||||
@tap="sheep.$router.go(item.path)"
|
||||
>
|
||||
<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
|
||||
<image
|
||||
class="menu-icon ss-m-b-10"
|
||||
:src="sheep.$url.static(item.img)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<text class="menu-title">{{ item.title }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
menuList: [
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon1.png',
|
||||
title: '我的团队',
|
||||
path: '/pages/commission/team',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon2.png',
|
||||
title: '佣金明细',
|
||||
path: '/pages/user/wallet/commission',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon3.png',
|
||||
title: '分销订单',
|
||||
path: '/pages/commission/order',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon4.png',
|
||||
title: '推广商品',
|
||||
path: '/pages/commission/goods',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon5.png',
|
||||
title: '我的资料',
|
||||
path: '/pages/commission/apply',
|
||||
isAgentFrom: true,
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon7.png',
|
||||
title: '邀请海报',
|
||||
path: 'action:showShareModal',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon8.png',
|
||||
title: '分享记录',
|
||||
path: '/pages/commission/share-log',
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-box {
|
||||
margin: 0 auto;
|
||||
width: 690rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
.header-box {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
position: relative;
|
||||
.header-bg {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
.header-title {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.cicon-forward {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding: 50rpx 0 10rpx 0;
|
||||
background: #fdfae9;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
}
|
||||
.item-box {
|
||||
width: 25%;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="推广商品" :onShareAppMessage="state.shareInfo">
|
||||
<view class="goods-item ss-m-20" v-for="item in state.pagination.data" :key="item.id">
|
||||
<s-goods-item
|
||||
size="lg"
|
||||
:img="item.image"
|
||||
:title="item.title"
|
||||
:subTitle="item.subtitle"
|
||||
:price="item.price[0]"
|
||||
:originPrice="item.original_price"
|
||||
priceColor="#333"
|
||||
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
>
|
||||
<template #bottom>
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="commission-num">预计佣金：￥{{ item.commission }}</view>
|
||||
<button
|
||||
class="ss-reset-button share-btn ui-BG-Main-Gradient"
|
||||
@tap.stop="onShareGoods(item)"
|
||||
>
|
||||
分享赚
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/goods-empty.png"
|
||||
text="暂无推广商品"
|
||||
></s-empty>
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import $share from '@/sheep/platform/share';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
shareInfo: {},
|
||||
});
|
||||
|
||||
function onShareGoods(goodsInfo) {
|
||||
state.shareInfo = $share.getShareInfo(
|
||||
{
|
||||
title: goodsInfo.title,
|
||||
image: sheep.$url.cdn(goodsInfo.image),
|
||||
desc: goodsInfo.subtitle,
|
||||
params: {
|
||||
page: '2',
|
||||
query: goodsInfo.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: goodsInfo.title, // 商品标题
|
||||
image: sheep.$url.cdn(goodsInfo.image), // 商品主图
|
||||
price: goodsInfo.price[0], // 商品价格
|
||||
original_price: goodsInfo.original_price, // 商品原价
|
||||
},
|
||||
);
|
||||
showShareModal();
|
||||
}
|
||||
|
||||
async function getGoodsList(page = 1, list_rows = 8) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.commission.goods({
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
getGoodsList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getGoodsList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-item {
|
||||
.commission-num {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!-- 分销中心 -->
|
||||
<template>
|
||||
<s-layout navbar="inner" class="index-wrap" title="分销中心" :bgStyle="bgStyle">
|
||||
<!-- 分销商信息 -->
|
||||
<commission-info />
|
||||
<!-- 账户信息 -->
|
||||
<account-info />
|
||||
<!-- 菜单栏 -->
|
||||
<commission-menu />
|
||||
<!-- 分销记录 -->
|
||||
<commission-log />
|
||||
<!-- 弹框 -->
|
||||
<commission-condition :error="state.error" :errorData="state.errorData" />
|
||||
|
||||
<!-- 权限 -->
|
||||
<commission-auth :error="state.error" @getAgentInfo="getAgentInfo" />
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import commissionInfo from './components/commission-info.vue';
|
||||
import accountInfo from './components/account-info.vue';
|
||||
import commissionLog from './components/commission-log.vue';
|
||||
import commissionMenu from './components/commission-menu.vue';
|
||||
import commissionAuth from './components/commission-auth.vue';
|
||||
import commissionCondition from './components/commission-condition.vue';
|
||||
|
||||
const state = reactive({
|
||||
error: 0,
|
||||
errorData: {},
|
||||
config: {
|
||||
background: '/storage/default/20220704/29ac76a3c9d0d983200d612e45a052ca.png',
|
||||
},
|
||||
});
|
||||
|
||||
const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
|
||||
const bgStyle = {
|
||||
color: '#F7D598',
|
||||
};
|
||||
|
||||
async function getAgentInfo() {
|
||||
const { error, data } = await sheep.$store('user').getAgentInfo();
|
||||
if (error !== 0) {
|
||||
state.error = error;
|
||||
state.errorData = data;
|
||||
}
|
||||
}
|
||||
onShow(() => {
|
||||
getAgentInfo();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.page-main) {
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,416 @@
|
||||
<!-- 分销订单 -->
|
||||
<template>
|
||||
<s-layout title="分销订单" :class="state.scrollTop ? 'order-warp' : ''" navbar="inner">
|
||||
<view
|
||||
class="header-box"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- 团队数据总览 -->
|
||||
<view class="team-data-box ss-flex ss-col-center ss-row-between">
|
||||
<view class="data-card">
|
||||
<view class="total-item">
|
||||
<view class="item-title">团队订单数量（单）</view>
|
||||
<view class="total-num">
|
||||
{{ state.agentInfo.child_order_count_all || 0 }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="category-item ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">一级订单</view>
|
||||
<view class="category-num">
|
||||
{{ state.agentInfo.child_order_count_1 || 0 }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">二级订单</view>
|
||||
<view class="category-num">
|
||||
{{ state.agentInfo.child_order_count_2 || 0 }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="data-card">
|
||||
<view class="total-item">
|
||||
<view class="item-title">团队订单金额（元）</view>
|
||||
<view class="total-num">
|
||||
{{ state.agentInfo.child_order_money_all || '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="category-item ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">一级订单</view>
|
||||
<view class="category-num">
|
||||
{{ state.agentInfo.child_order_money_1 || '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">二级订单</view>
|
||||
<view class="category-num">
|
||||
{{ state.agentInfo.child_order_money_2 || '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自购 -->
|
||||
<view class="direct-box ss-flex ss-row-between">
|
||||
<view class="direct-item">
|
||||
<view class="item-title">自购分销订单数量（单）</view>
|
||||
<view class="item-value">
|
||||
{{ state.agentInfo.child_order_count_0 || 0 }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="direct-item">
|
||||
<view class="item-title">自购分销订单金额（元）</view>
|
||||
<view class="item-value">
|
||||
{{ state.agentInfo.child_order_money_0 || '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- tab -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
@change="onTabsChange"
|
||||
>
|
||||
</su-tabs>
|
||||
</su-sticky>
|
||||
|
||||
<!-- 订单 -->
|
||||
<view class="order-box">
|
||||
<view class="order-item" v-for="item in state.pagination.data" :key="item">
|
||||
<view class="order-header">
|
||||
<view class="no-box ss-flex ss-col-center ss-row-between">
|
||||
<text class="order-code">订单编号：{{ item.order.order_sn }}</text>
|
||||
<text class="order-state">{{ item.order_item.status_text }}</text>
|
||||
</view>
|
||||
<view class="order-from ss-flex ss-col-center ss-row-between">
|
||||
<view class="from-user ss-flex ss-col-center">
|
||||
<text>下单人：</text>
|
||||
<image class="user-avatar" :src="sheep.$url.cdn(item.buyer.avatar)" mode="aspectFill">
|
||||
</image>
|
||||
<text class="user-name">{{ item.buyer.nickname }}</text>
|
||||
</view>
|
||||
<view class="order-time">{{ item.create_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-goods-item
|
||||
class="border-bottom"
|
||||
:img="item.order_item.goods_image"
|
||||
:title="item.order_item.goods_title"
|
||||
:skuText="item.order_item.goods_sku_text"
|
||||
:price="item.order_item.goods_price"
|
||||
:num="item.order_item.goods_num"
|
||||
>
|
||||
<template #bottom>
|
||||
<view class="ss-flex commission-box ss-row-between ss-m-t-10">
|
||||
<view class="ss-flex">
|
||||
<text class="name">佣金：</text>
|
||||
<text class="commission-num">{{ item.rewards[0]?.commission }}</text>
|
||||
</view>
|
||||
<view class="order-status">
|
||||
{{ item.commission_order_status_text }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
<!-- 数据为空 -->
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单">
|
||||
</s-empty>
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
onPageScroll((e) => {
|
||||
if (e.scrollTop > 100) {
|
||||
state.scrollTop = false;
|
||||
} else {
|
||||
state.scrollTop = true;
|
||||
}
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
currentTab: 0,
|
||||
agentInfo: {},
|
||||
scrollTop: false,
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
// {
|
||||
// name: '不计入',
|
||||
// value: 'no'
|
||||
// },
|
||||
{
|
||||
name: '已计入',
|
||||
value: 'yes',
|
||||
},
|
||||
{
|
||||
name: '已扣除',
|
||||
value: 'back',
|
||||
},
|
||||
{
|
||||
name: '已取消',
|
||||
value: 'cancel',
|
||||
},
|
||||
];
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.currentTab = e.index;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
async function getOrderList(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.commission.order({
|
||||
type: tabMaps[state.currentTab].value,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getAgentInfo() {
|
||||
const { error, data, msg } = await sheep.$api.commission.agent();
|
||||
if (error === 0) {
|
||||
state.agentInfo = data;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getAgentInfo();
|
||||
getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getOrderList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
width: 750rpx;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/user/withdraw_bg.png')") no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
// 团队信息总览
|
||||
.team-data-box {
|
||||
.data-card {
|
||||
width: 305rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.total-item {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: normal;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.total-num {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.category-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 直推
|
||||
.direct-box {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.direct-item {
|
||||
width: 340rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单
|
||||
.order-box {
|
||||
.order-item {
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.order-footer {
|
||||
padding: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
.no-box {
|
||||
padding: 20rpx;
|
||||
|
||||
.order-code {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.order-state {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.order-from {
|
||||
padding: 20rpx;
|
||||
|
||||
.from-user {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
.user-avatar {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commission-box {
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.commission-num {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: $red;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-status {
|
||||
line-height: 30rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<!-- 分销记录 -->
|
||||
<template>
|
||||
<s-layout title="分享记录">
|
||||
<view class="distraction-share-wrap">
|
||||
<view class="share-log-box">
|
||||
<!-- 分享记录列表 -->
|
||||
<view class="log-list ss-flex" v-for="item in state.pagination.data" :key="item.id">
|
||||
<view class="log-avatar-wrap">
|
||||
<image
|
||||
class="log-avatar"
|
||||
:src="sheep.$url.cdn(item.user?.avatar)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="item-right">
|
||||
<view class="name">{{ item.user?.nickname }}</view>
|
||||
<view class="content ss-flex">
|
||||
<view v-if="item.ext?.image" class="content-img-wrap">
|
||||
<image class="content-img" :src="sheep.$url.cdn(item.ext?.image)" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<view v-if="item.ext?.memo" class="content-text">
|
||||
{{ item.ext?.memo }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-bottom ss-flex ss-row-between">
|
||||
<view class="from-text"></view>
|
||||
<view class="time">{{ dayjs(item.create_time).fromNow() }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/data-empty.png"
|
||||
text="暂无分享记录"
|
||||
>
|
||||
</s-empty>
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
async function getShareLog(page = 1, list_rows = 8) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.user.share.list({
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getShareLog(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onLoad(async () => {
|
||||
getShareLog();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-log-box {
|
||||
// 分享记录列表
|
||||
.log-list {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin: 10rpx 0;
|
||||
align-items: flex-start;
|
||||
|
||||
.log-avatar-wrap {
|
||||
margin-right: 14rpx;
|
||||
|
||||
.log-avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-right {
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #7f7aa5;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: rgba(241, 241, 241, 0.46);
|
||||
border-radius: 2rpx;
|
||||
padding: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.content-img-wrap {
|
||||
margin-right: 16rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
.content-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
width: 100%;
|
||||
|
||||
.time {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #c8c8c8;
|
||||
}
|
||||
|
||||
.from-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #c8c8c8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,261 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
|
||||
<view
|
||||
class="header-box"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- 推荐人 -->
|
||||
<view v-if="userInfo.parent_user" class="referrer-box ss-flex ss-col-center">
|
||||
推荐人：
|
||||
<image
|
||||
class="referrer-avatar ss-m-r-10"
|
||||
:src="sheep.$url.cdn(userInfo.parent_user.avatar)"
|
||||
mode="aspectFill"
|
||||
>
|
||||
</image>
|
||||
{{ userInfo.parent_user.nickname }}
|
||||
</view>
|
||||
<!-- 团队数据总览 -->
|
||||
<view class="team-data-box ss-flex ss-col-center ss-row-between">
|
||||
<view class="data-card">
|
||||
<view class="total-item">
|
||||
<view class="item-title">团队总人数（人）</view>
|
||||
<view class="total-num">{{ agentInfo.child_user_count_all || 0 }}</view>
|
||||
</view>
|
||||
<view class="category-item ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">一级成员</view>
|
||||
<view class="category-num">{{ agentInfo.child_user_count_1 || 0 }}</view>
|
||||
</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">二级成员</view>
|
||||
<view class="category-num">{{ agentInfo.child_user_count_2 || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="data-card">
|
||||
<view class="total-item">
|
||||
<view class="item-title">团队分销商人数（人）</view>
|
||||
<view class="total-num">{{ agentInfo.child_agent_count_all || 0 }}</view>
|
||||
</view>
|
||||
<view class="category-item ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">一级分销商</view>
|
||||
<view class="category-num">{{ agentInfo.child_agent_count_1 || 0 }}</view>
|
||||
</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">二级分销商</view>
|
||||
<view class="category-num">{{ agentInfo.child_agent_count_2 || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<uni-list :border="false">
|
||||
<uni-list-chat
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
:avatar-circle="true"
|
||||
:title="item.nickname"
|
||||
:avatar="sheep.$url.cdn(item.avatar)"
|
||||
:note="filterUserNum(item.agent?.child_user_count_1)"
|
||||
>
|
||||
<view class="chat-custom-right">
|
||||
<view v-if="item.agent?.level_info" class="tag-box ss-flex ss-col-center">
|
||||
<image
|
||||
class="tag-img"
|
||||
:src="sheep.$url.cdn(item.agent.level_info.image)"
|
||||
mode="aspectFill"
|
||||
>
|
||||
</image>
|
||||
<text class="tag-title">{{ item.agent.level_info.name }}</text>
|
||||
</view>
|
||||
|
||||
<text class="time-text">{{ item.create_time }}</text>
|
||||
</view>
|
||||
</uni-list-chat>
|
||||
</uni-list>
|
||||
</view>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息">
|
||||
</s-empty>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
onPageScroll((e) => {
|
||||
if (e.scrollTop > 100) {
|
||||
state.scrollTop = false;
|
||||
} else {
|
||||
state.scrollTop = true;
|
||||
}
|
||||
});
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
function filterUserNum(num) {
|
||||
if (_.isNil(num)) {
|
||||
return '';
|
||||
}
|
||||
return `下级团队${num}人`;
|
||||
}
|
||||
|
||||
async function getTeamList(page = 1, list_rows = 8) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.commission.team({
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
getTeamList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getTeamList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
width: 750rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/user/withdraw_bg.png')") no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
// 团队信息总览
|
||||
.team-data-box {
|
||||
.data-card {
|
||||
width: 305rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.total-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.total-num {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.category-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
.chat-custom-right {
|
||||
.time-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 21rpx;
|
||||
line-height: 30rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
width: 140rpx;
|
||||
|
||||
.tag-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 6rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推荐人
|
||||
.referrer-box {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 20rpx;
|
||||
|
||||
.referrer-avatar {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,371 @@
|
||||
<!-- 优惠券详情 -->
|
||||
<template>
|
||||
<s-layout title="优惠券详情">
|
||||
<view class="bg-white">
|
||||
<!-- 详情卡片 -->
|
||||
<view class="detail-wrap ss-p-20">
|
||||
<view class="detail-box">
|
||||
<view class="tag-box ss-flex ss-col-center ss-row-center">
|
||||
<image
|
||||
class="tag-image"
|
||||
:src="sheep.$url.static('/static/img/shop/app/coupon_icon.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
<view class="top ss-flex-col ss-col-center">
|
||||
<view class="title ss-m-t-50 ss-m-b-20 ss-m-x-20">{{ state.list.name }}</view>
|
||||
<view class="subtitle ss-m-b-50">{{ state.list.amount_text }}</view>
|
||||
<button
|
||||
class="ss-reset-button ss-m-b-30"
|
||||
:class="
|
||||
state.list.get_status == 'can_get' || state.list.get_status == 'can_use'
|
||||
? 'use-btn'
|
||||
: 'disable-btn'
|
||||
"
|
||||
:disabled="
|
||||
(state.list.get_status != 'can_get' && state.list.get_status != 'can_use') ||
|
||||
state.userCouponId
|
||||
"
|
||||
@click="getCoupon"
|
||||
>
|
||||
{{ state.list.get_status_text }}
|
||||
</button>
|
||||
<view
|
||||
class="time ss-m-y-30"
|
||||
v-if="
|
||||
state.list.get_status == 'can_get' ||
|
||||
state.list.get_status == 'cannot_get' ||
|
||||
state.list.get_status == 'get_over'
|
||||
"
|
||||
>
|
||||
领取时间：{{ state.list.get_start_time }}至{{ state.list.get_end_time }}
|
||||
</view>
|
||||
<view class="time ss-m-y-30" v-else>
|
||||
有效期：{{ state.list.use_start_time }}至{{ state.list.use_end_time }}
|
||||
</view>
|
||||
<view class="coupon-line ss-m-t-14"></view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="type ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<view>优惠券类型</view>
|
||||
<view>{{ state.list.type_text }}</view>
|
||||
</view>
|
||||
<uni-collapse>
|
||||
<uni-collapse-item title="优惠券说明" v-if="state.list.description">
|
||||
<view class="content ss-p-b-20">
|
||||
<text class="des ss-p-l-30">{{ state.list.description }}</text>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 适用商品 -->
|
||||
<view
|
||||
class="all-user ss-flex ss-row-center ss-col-center"
|
||||
v-if="state.list.use_scope == 'all_use'"
|
||||
>
|
||||
{{ state.list.use_scope_text }}
|
||||
</view>
|
||||
|
||||
<su-sticky v-else bgColor="#fff">
|
||||
<view class="goods-title ss-p-20">{{ state.list.use_scope_text }}</view>
|
||||
<su-tabs
|
||||
:scrollable="true"
|
||||
:list="state.tabMaps"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
v-if="state.list.use_scope == 'category'"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<view v-if="state.list.use_scope == 'goods' || state.list.use_scope == 'disabled_goods'">
|
||||
<view v-for="(item, index) in state.list.items_value" :key="index">
|
||||
<s-goods-column
|
||||
class="ss-m-20"
|
||||
size="lg"
|
||||
:data="item"
|
||||
:titleColor="props.goodsFieldsStyle?.title?.color"
|
||||
:subTitleColor="props.goodsFieldsStyle?.subtitle?.color"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
:goodsFields="{
|
||||
title: { show: true },
|
||||
subtitle: { show: true },
|
||||
price: { show: true },
|
||||
original_price: { show: true },
|
||||
sales: { show: true },
|
||||
stock: { show: false },
|
||||
}"
|
||||
:buttonShow="state.list.use_scope != 'disabled_goods'"
|
||||
></s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="state.list.use_scope == 'category'">
|
||||
<view v-for="(item, index) in state.pagination.data" :key="index">
|
||||
<s-goods-column
|
||||
class="ss-m-20"
|
||||
size="lg"
|
||||
:data="item"
|
||||
:titleColor="props.goodsFieldsStyle?.title?.color"
|
||||
:subTitleColor="props.goodsFieldsStyle?.subtitle?.color"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
:goodsFields="{
|
||||
title: { show: true },
|
||||
subtitle: { show: true },
|
||||
price: { show: true },
|
||||
original_price: { show: true },
|
||||
sales: { show: true },
|
||||
stock: { show: false },
|
||||
}"
|
||||
:buttonShow="state.list.use_scope != 'disabled_goods'"
|
||||
></s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0 && state.list.use_scope == 'category'"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
paddingTop="0"
|
||||
icon="/static/soldout-empty.png"
|
||||
text="暂无商品"
|
||||
>
|
||||
</s-empty>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
const state = reactive({
|
||||
list: {},
|
||||
couponId: 0,
|
||||
userCouponId: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
tabMaps: [],
|
||||
loadStatus: '',
|
||||
categoryId: 0,
|
||||
});
|
||||
|
||||
// 接收参数
|
||||
const props = defineProps({
|
||||
includes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
goodsFieldsStyle: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
buyData: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
|
||||
function onTabsChange(e) {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.currentTab = e.index;
|
||||
state.categoryId = e.value;
|
||||
getGoodsList(state.categoryId);
|
||||
}
|
||||
async function getGoodsList(categoryId, page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.list({
|
||||
category_id: categoryId,
|
||||
list_rows,
|
||||
page,
|
||||
is_category_deep: false,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponlist = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponlist,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
async function getCoupon() {
|
||||
const { error, msg } = await sheep.$api.coupon.get(state.couponId);
|
||||
if (error === 0) {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
});
|
||||
setTimeout(() => {
|
||||
getCouponContent(state.couponId, state.userCouponId);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
async function getCouponContent(id, c) {
|
||||
const { data } = await sheep.$api.coupon.detail(id, c);
|
||||
state.list = data;
|
||||
data.items_value.forEach((i) => {
|
||||
state.tabMaps.push({ name: i.name, value: i.id });
|
||||
});
|
||||
getGoodsList(state.tabMaps[0].value);
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getGoodsList(state.categoryId, state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.couponId = options.id;
|
||||
state.userCouponId = options.user_coupon_id;
|
||||
getCouponContent(state.couponId, state.userCouponId);
|
||||
});
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.detail-wrap {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--ui-BG-Main),
|
||||
var(--ui-BG-Main-gradient),
|
||||
var(--ui-BG-Main),
|
||||
#fff
|
||||
);
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
// background-color: var(--ui-BG);
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
margin-top: 100rpx;
|
||||
.tag-box {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
background: var(--ui-BG);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -70rpx;
|
||||
left: 50%;
|
||||
z-index: 6;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.tag-image {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
-webkit-mask: radial-gradient(circle at 16rpx 100%, #0000 16rpx, red 0) -16rpx;
|
||||
padding: 110rpx 0 0 0;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.use-btn {
|
||||
width: 386rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 40rpx;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.disable-btn {
|
||||
width: 386rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #e5e5e5;
|
||||
border-radius: 40rpx;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.coupon-line {
|
||||
width: 95%;
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
-webkit-mask: radial-gradient(circle at 16rpx 0%, #0000 16rpx, red 0) -16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
|
||||
.type {
|
||||
height: 96rpx;
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.all-user {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,244 @@
|
||||
<!-- 优惠券中心 -->
|
||||
<template>
|
||||
<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/coupon-empty.png"
|
||||
text="暂无优惠券"
|
||||
></s-empty>
|
||||
<template v-if="state.currentTab == '0'">
|
||||
<view v-for="item in state.pagination.data" :key="item.id">
|
||||
<s-coupon-list
|
||||
:data="item"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/coupon/detail', {
|
||||
id: item.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<template #default>
|
||||
<button
|
||||
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
|
||||
:class="item.get_status != 'can_get' ? 'border-btn' : ''"
|
||||
@click.stop="getBuy(item.id)"
|
||||
:disabled="item.get_status != 'can_get'"
|
||||
>
|
||||
{{ item.get_status_text }}
|
||||
</button>
|
||||
</template>
|
||||
</s-coupon-list>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="item in state.pagination.data" :key="item.id">
|
||||
<s-coupon-list
|
||||
:data="item"
|
||||
type="user"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/coupon/detail', {
|
||||
id: item.coupon_id,
|
||||
user_coupon_id: item.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<template #default>
|
||||
<button
|
||||
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
|
||||
:class="
|
||||
item.status == 'can_get' || item.status == 'can_use'
|
||||
? ''
|
||||
: item.status == 'used' || item.status == 'expired'
|
||||
? 'disabled-btn'
|
||||
: 'border-btn'
|
||||
"
|
||||
:disabled="item.status != 'can_get' && item.status != 'can_use'"
|
||||
@click.stop="
|
||||
sheep.$router.go('/pages/coupon/detail', {
|
||||
id: item.coupon_id,
|
||||
user_coupon_id: item.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ item.status_text }}
|
||||
</button>
|
||||
</template>
|
||||
</s-coupon-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
|
||||
// 数据
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
type: '',
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '领券中心',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '已领取',
|
||||
value: 'geted',
|
||||
},
|
||||
{
|
||||
name: '已使用',
|
||||
value: 'used',
|
||||
},
|
||||
{
|
||||
name: '已失效',
|
||||
value: 'expired',
|
||||
},
|
||||
];
|
||||
function onTabsChange(e) {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.currentTab = e.index;
|
||||
state.type = e.value;
|
||||
if (state.currentTab == 0) {
|
||||
getData();
|
||||
} else {
|
||||
getCoupon();
|
||||
}
|
||||
}
|
||||
async function getData(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.coupon.list({ list_rows, page });
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponlist = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponlist,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getCoupon(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.coupon.userCoupon({
|
||||
type: state.type,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponlist = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponlist,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
async function getBuy(id) {
|
||||
const { error, msg } = await sheep.$api.coupon.get(id);
|
||||
if (error === 0) {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
});
|
||||
setTimeout(() => {
|
||||
getData();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
if (state.currentTab == 0) {
|
||||
getData(state.pagination.current_page + 1);
|
||||
} else {
|
||||
getCoupon(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
onLoad((Option) => {
|
||||
if (Option.type === 'all' || !Option.type) {
|
||||
getData();
|
||||
} else {
|
||||
state.type = Option.type;
|
||||
Option.type === 'geted'
|
||||
? (state.currentTab = 1)
|
||||
: Option.type === 'used'
|
||||
? (state.currentTab = 2)
|
||||
: (state.currentTab = 3);
|
||||
getCoupon();
|
||||
}
|
||||
});
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-btn {
|
||||
// width: 144rpx;
|
||||
padding: 0 16rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
.border-btn {
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
|
||||
color: #fff !important;
|
||||
}
|
||||
.disabled-btn {
|
||||
background: #cccccc;
|
||||
background-color: #cccccc !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!-- 评价 -->
|
||||
<template>
|
||||
<s-layout title="评价">
|
||||
<view>
|
||||
<view v-for="(item, index) in state.orderInfo.items" :key="item.id">
|
||||
<view v-if="item.btns.includes('comment')">
|
||||
<view class="commont-from-wrap">
|
||||
<!-- 评价商品 -->
|
||||
<s-goods-item
|
||||
:img="item.goods_image"
|
||||
:title="item.goods_title"
|
||||
:skuText="item.goods_sku_text"
|
||||
:price="item.goods_price"
|
||||
:num="item.goods_num"
|
||||
></s-goods-item>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<!-- 评分 -->
|
||||
<view class="star-box ss-flex ss-col-center">
|
||||
<view class="star-title ss-m-r-40">
|
||||
{{ rateMap[state.commentList[index].level] }}
|
||||
</view>
|
||||
<uni-rate v-model="state.commentList[index].level" />
|
||||
</view>
|
||||
<!-- 评价 -->
|
||||
<view class="area-box">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="textarea"
|
||||
maxlength="120"
|
||||
autoHeight
|
||||
v-model="state.commentList[index].content"
|
||||
placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧~"
|
||||
></uni-easyinput>
|
||||
|
||||
<view class="img-box">
|
||||
<s-uploader
|
||||
v-model:url="state.commentList[index].images"
|
||||
fileMediatype="image"
|
||||
limit="9"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="foot_box ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onSubmit">
|
||||
发布
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
orderInfo: {},
|
||||
commentList: [],
|
||||
});
|
||||
|
||||
const rateMap = {
|
||||
1: '糟糕',
|
||||
2: '差评',
|
||||
3: '一般',
|
||||
4: '良好',
|
||||
5: '好评',
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
const { error } = await sheep.$api.order.comment(state.orderInfo.id, {
|
||||
comments: state.commentList,
|
||||
});
|
||||
if (error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = '';
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
|
||||
const { data, error } = await sheep.$api.order.detail(id);
|
||||
if (error === 0) {
|
||||
if (data.btns.includes('comment')) {
|
||||
state.orderInfo = data;
|
||||
state.orderInfo.items.forEach((item) => {
|
||||
if (item.btns.includes('comment')) {
|
||||
state.commentList.push({
|
||||
item_id: item.id,
|
||||
level: 5,
|
||||
content: '',
|
||||
images: [],
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
sheep.$helper.toast('无待评价订单');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 评价商品
|
||||
.goods-card {
|
||||
margin: 10rpx 0;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 评论，选择图片
|
||||
.form-item {
|
||||
background: #fff;
|
||||
.star-box {
|
||||
height: 100rpx;
|
||||
padding: 0 25rpx;
|
||||
}
|
||||
.star-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.area-box {
|
||||
width: 690rpx;
|
||||
min-height: 306rpx;
|
||||
background: rgba(249, 250, 251, 1);
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
margin: auto;
|
||||
|
||||
.img-box {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.post-btn {
|
||||
width: 690rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="全部评价">
|
||||
<su-tabs
|
||||
:list="state.type"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
<view class="ss-m-t-20">
|
||||
<view class="list-item" v-for="item in state.pagination.data" :key="item">
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="ss-flex">
|
||||
<image class="avatar" :src="sheep.$url.static(item.user_avatar)" />
|
||||
<view class="ss-m-l-20 ss-m-r-24 nickname">{{ item.user_nickname }}</view>
|
||||
<view><uni-rate :readonly="true" size="16" :value="item.level" /></view>
|
||||
</view>
|
||||
<view class="create-time">{{ item.create_time?.substring(0, 11) }}</view>
|
||||
</view>
|
||||
<view class="ss-m-t-20 content-title">{{ item.content }}</view>
|
||||
<view class="ss-m-t-40" v-if="item.images?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring enable-flex>
|
||||
<view class="ss-flex">
|
||||
<view v-for="i in item.images" :key="i" class="ss-m-r-20"
|
||||
><image class="content-img" :src="sheep.$url.static(i)" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-right">
|
||||
<text class="cicon-info-o"></text>
|
||||
<view class="ss-m-l-8 foot-title">举报</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
const state = reactive({
|
||||
list: [],
|
||||
type: [],
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
commentId: 0,
|
||||
code: 'all',
|
||||
});
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.currentTab = e.index;
|
||||
state.code = e.code;
|
||||
getList(state.commentId, e.code);
|
||||
}
|
||||
async function getType(id) {
|
||||
const { error, data } = await sheep.$api.goods.getType(id);
|
||||
if (error === 0) {
|
||||
state.type = data;
|
||||
}
|
||||
}
|
||||
async function getList(id, code, page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.goods.comment(id, {
|
||||
type: code,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(state.commentId, state.code, state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.commentId = options.id;
|
||||
getType(state.commentId);
|
||||
getList(state.commentId);
|
||||
});
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-item {
|
||||
padding: 32rpx 30rpx 20rpx 20rpx;
|
||||
background: #fff;
|
||||
.avatar {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.nickname {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
.create-time {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
.content-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
.content-img {
|
||||
width: 174rpx;
|
||||
height: 174rpx;
|
||||
}
|
||||
.cicon-info-o {
|
||||
font-size: 26rpx;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
.foot-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background: #fff;
|
||||
border-top: 2rpx solid #eee;
|
||||
}
|
||||
.tab-btn {
|
||||
width: 130rpx;
|
||||
height: 62rpx;
|
||||
background: #eeeeee;
|
||||
border-radius: 31rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
border: 1px solid #e5e5e5;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="user ss-flex ss-m-b-14">
|
||||
<view class="ss-m-r-20 ss-flex">
|
||||
<image class="avatar" :src="sheep.$url.cdn(item.user_avatar)"></image>
|
||||
</view>
|
||||
<view class="nickname ss-m-r-20">
|
||||
{{ item.user_nickname }}
|
||||
</view>
|
||||
<view class="">
|
||||
<uni-rate :readonly="true" v-model="item.level" size="18" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<view class="ss-m-t-24" v-if="item.images?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||
<view class="ss-flex">
|
||||
<view v-for="(item, index) in item.images" :key="item" class="ss-m-r-10">
|
||||
<su-image
|
||||
class="content-img"
|
||||
isPreview
|
||||
:previewList="state.commentImages"
|
||||
:current="index"
|
||||
:src="item"
|
||||
:height="120"
|
||||
:width="120"
|
||||
mode="aspectFill"
|
||||
></su-image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
commentImages: [],
|
||||
});
|
||||
props.item.images?.forEach((i) => {
|
||||
state.commentImages.push(sheep.$url.cdn(i));
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 636rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<su-fixed bottom placeholder :val="44">
|
||||
<view>
|
||||
<view v-for="activity in data.activities" :key="activity.id">
|
||||
<view
|
||||
class="activity-box ss-p-x-38 ss-flex ss-row-between ss-col-center"
|
||||
:class="activity.type == 'seckill' ? 'seckill-box' : 'groupon-box'"
|
||||
>
|
||||
<view class="activity-title ss-flex">
|
||||
<view class="ss-m-r-16">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/seckill-icon.png')"
|
||||
v-if="activity.type == 'seckill'"
|
||||
class="activity-icon"
|
||||
></image>
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/groupon-icon.png')"
|
||||
class="activity-icon"
|
||||
v-else
|
||||
></image>
|
||||
</view>
|
||||
<view>该商品正在参与{{ activity.type_text }}活动</view>
|
||||
</view>
|
||||
<button class="ss-reset-button activity-go" @tap="onActivity(activity)"> GO </button>
|
||||
</view>
|
||||
<!-- <button @tap="onActivity(activity)">{{ activity.title }} {{ activity.type_text }}</button> -->
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
function onActivity(activity) {
|
||||
let type = activity.type;
|
||||
if (type === 'groupon_ladder') type = 'groupon';
|
||||
sheep.$router.go(`/pages/goods/${type}`, {
|
||||
id: props.data.id,
|
||||
activity_id: activity.id,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.activity-box {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.activity-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
|
||||
.activity-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-go {
|
||||
width: 70rpx;
|
||||
height: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
//秒杀卡片
|
||||
.seckill-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.groupon-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<view>
|
||||
<detail-cell
|
||||
v-if="modelValue.length > 0"
|
||||
label="参数"
|
||||
:value="state.paramsTitle"
|
||||
@click="state.show = true"
|
||||
></detail-cell>
|
||||
<su-popup :show="state.show" round="10" :showClose="true" @close="close">
|
||||
<view class="ss-modal-box bg-white">
|
||||
<view class="modal-header">产品参数</view>
|
||||
<scroll-view
|
||||
class="modal-content ss-p-t-50"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="true"
|
||||
:show-scrollbar="false"
|
||||
@touchmove.stop
|
||||
>
|
||||
<view class="sale-item ss-flex ss-col-top" v-for="item in modelValue" :key="item.title">
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-value">{{ item.content }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="modal-footer ss-flex ss-row-center ss-m-b-20">
|
||||
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="state.show = false"
|
||||
>确定</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
|
||||
import detailCell from './detail-cell.vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
show: false,
|
||||
paramsTitle: computed(() => {
|
||||
let titleArray = [];
|
||||
props.modelValue.map((item) => {
|
||||
titleArray.push(item.title);
|
||||
});
|
||||
return titleArray.join(' · ');
|
||||
}),
|
||||
});
|
||||
|
||||
function close() {
|
||||
state.show = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-modal-box {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
max-height: 730rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 30rpx 20rpx 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 0 30rpx;
|
||||
max-height: 500rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.sale-item {
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 2rpx solid rgba(#dfdfdf, 0.4);
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 42rpx;
|
||||
width: 120rpx;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
line-height: 42rpx;
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 120rpx;
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view>
|
||||
<detail-cell
|
||||
v-if="modelValue.length > 0"
|
||||
label="保障"
|
||||
:value="state.paramsTitle"
|
||||
@click="state.show = true"
|
||||
>
|
||||
</detail-cell>
|
||||
<su-popup :show="state.show" round="10" :showClose="true" @close="state.show = false">
|
||||
<view class="ss-modal-box">
|
||||
<view class="modal-header">服务保障</view>
|
||||
<scroll-view
|
||||
class="modal-content"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="true"
|
||||
:show-scrollbar="false"
|
||||
@touchmove.stop
|
||||
>
|
||||
<view class="sale-item ss-flex ss-col-top" v-for="item in modelValue" :key="item.id">
|
||||
<image
|
||||
class="title-icon ss-m-r-14"
|
||||
:src="sheep.$url.cdn(item.image)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="title-box">
|
||||
<view class="item-title ss-m-b-20">{{ item.name }}</view>
|
||||
<view class="item-value">{{ item.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="modal-footer ss-flex ss-row-center ss-m-b-20">
|
||||
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="state.show = false"
|
||||
>确定</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import detailCell from './detail-cell.vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
show: false,
|
||||
paramsTitle: computed(() => {
|
||||
let nameArray = [];
|
||||
props.modelValue.map((item) => {
|
||||
nameArray.push(item.name);
|
||||
});
|
||||
return nameArray.join(' · ');
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-modal-box {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
max-height: 730rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 30rpx 20rpx 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 0 30rpx;
|
||||
max-height: 500rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.sale-item {
|
||||
margin-bottom: 44rpx;
|
||||
|
||||
.title-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 120rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<detail-cell v-if="skus.length > 0" label="选择" :value="value"></detail-cell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import detailCell from './detail-cell.vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
skus: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const value = computed(() => {
|
||||
let str = '';
|
||||
if (props.modelValue.length > 0) {
|
||||
props.modelValue.forEach((item, index) => {
|
||||
str += props.skus[index].name + ':' + item + ' ';
|
||||
});
|
||||
} else {
|
||||
str = '请选择商品规格';
|
||||
}
|
||||
return str;
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view class="detail-cell-wrap ss-flex ss-col-center ss-row-between" @tap="onClick">
|
||||
<view class="label-text">{{ label }}</view>
|
||||
<view class="cell-content ss-line-1 ss-flex-1">{{ value }}</view>
|
||||
<button class="ss-reset-button">
|
||||
<text class="_icon-forward right-forwrad-icon"></text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 详情 cell
|
||||
*
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['click']);
|
||||
|
||||
// 点击
|
||||
const onClick = () => {
|
||||
emits('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-cell-wrap {
|
||||
padding: 10rpx 20rpx;
|
||||
// min-height: 60rpx;
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
margin-right: 38rpx;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
}
|
||||
|
||||
.right-forwrad-icon {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="detail-comment-card bg-white">
|
||||
<view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="line"></view>
|
||||
<view class="title ss-m-l-20 ss-m-r-10">评价</view>
|
||||
<view class="des">({{ state.total }})</view>
|
||||
</view>
|
||||
<view
|
||||
class="ss-flex ss-col-center"
|
||||
@tap="sheep.$router.go('/pages/goods/comment/list', { id: goodsId })"
|
||||
v-if="state.commentList.length > 0"
|
||||
>
|
||||
<button class="ss-reset-button more-btn">查看全部</button>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<view class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
|
||||
<comment-item :item="item"></comment-item>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.commentList.length === 0"
|
||||
paddingTop="0"
|
||||
icon="/static/comment-empty.png"
|
||||
text="期待您的第一个评价"
|
||||
></s-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onBeforeMount } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import commentItem from './comment-item.vue';
|
||||
const props = defineProps({
|
||||
goodsId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
commentList: [],
|
||||
total: 0,
|
||||
});
|
||||
async function getComment(id) {
|
||||
const { data } = await sheep.$api.goods.comment(id, {
|
||||
list_rows: 3,
|
||||
});
|
||||
state.commentList = data.data;
|
||||
state.total = data.total;
|
||||
}
|
||||
onBeforeMount(() => {
|
||||
getComment(props.goodsId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-comment-card {
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
.card-header {
|
||||
.line {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 24rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: var(--ui-BG-Main);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-box {
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
|
||||
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
|
||||
<view class="line"></view>
|
||||
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<su-parse :content="content"></su-parse>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
const { safeAreaInsets } = sheep.$platform.device;
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-content-card {
|
||||
.card-header {
|
||||
.line {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 24rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
|
||||
<su-status-bar />
|
||||
<view
|
||||
class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
||||
>
|
||||
<!-- 左 -->
|
||||
<view class="icon-box ss-flex">
|
||||
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||
<text class="sicon-back" v-if="hasHistory" />
|
||||
<text class="sicon-home" v-else />
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
|
||||
<text class="sicon-more" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 中 -->
|
||||
<view class="detail-tab-card ss-flex-1" :style="[{ opacity: state.tabOpacityVal }]">
|
||||
<view class="tab-box ss-flex ss-col-center ss-row-around">
|
||||
<view
|
||||
class="tab-item ss-flex-1 ss-flex ss-row-center ss-col-center"
|
||||
v-for="item in state.tabList"
|
||||
:key="item.value"
|
||||
@tap="onTab(item)"
|
||||
>
|
||||
<view class="tab-title" :class="state.curTab === item.value ? 'cur-tab-title' : ''">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
<view v-show="state.curTab === item.value" class="tab-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="[capsuleStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import throttle from '@/sheep/helper/throttle.js';
|
||||
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
|
||||
|
||||
const sys_statusBar = sheep.$platform.device.statusBarHeight;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const capsuleStyle = {
|
||||
width: sheep.$platform.capsule.width + 'px',
|
||||
height: sheep.$platform.capsule.height + 'px',
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
tabOpacityVal: 0,
|
||||
curTab: 'goods',
|
||||
tabList: [
|
||||
{
|
||||
label: '商品',
|
||||
value: 'goods',
|
||||
to: 'detail-swiper-selector',
|
||||
},
|
||||
{
|
||||
label: '评价',
|
||||
value: 'comment',
|
||||
to: 'detail-comment-selector',
|
||||
},
|
||||
{
|
||||
label: '详情',
|
||||
value: 'detail',
|
||||
to: 'detail-content-selector',
|
||||
},
|
||||
],
|
||||
});
|
||||
const emits = defineEmits(['clickLeft']);
|
||||
const hasHistory = sheep.$router.hasHistory();
|
||||
|
||||
function onClickLeft() {
|
||||
if (hasHistory) {
|
||||
sheep.$router.back();
|
||||
} else {
|
||||
sheep.$router.go('/pages/index/index');
|
||||
}
|
||||
emits('clickLeft');
|
||||
}
|
||||
|
||||
function onClickRight() {
|
||||
showMenuTools();
|
||||
}
|
||||
|
||||
let commentCard = {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
};
|
||||
|
||||
function getCommentCardNode() {
|
||||
return new Promise((res, rej) => {
|
||||
uni.createSelectorQuery()
|
||||
.select('.detail-comment-selector')
|
||||
.boundingClientRect((data) => {
|
||||
if (data) {
|
||||
commentCard.top = data.top;
|
||||
commentCard.bottom = data.top + data.height;
|
||||
res(data);
|
||||
} else {
|
||||
res(null);
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
}
|
||||
|
||||
function onTab(tab) {
|
||||
let scrollTop = 0;
|
||||
if (tab.value === 'comment') {
|
||||
scrollTop = commentCard.top - sys_navBar + 1;
|
||||
} else if (tab.value === 'detail') {
|
||||
scrollTop = commentCard.bottom - sys_navBar + 1;
|
||||
}
|
||||
uni.pageScrollTo({
|
||||
scrollTop,
|
||||
duration: 200,
|
||||
});
|
||||
}
|
||||
|
||||
onPageScroll((e) => {
|
||||
state.tabOpacityVal = e.scrollTop > sheep.$platform.navbar ? 1 : e.scrollTop * 0.01;
|
||||
if (commentCard.top === 0) {
|
||||
throttle(() => {
|
||||
getCommentCardNode();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
if (e.scrollTop < commentCard.top - sys_navBar) {
|
||||
state.curTab = 'goods';
|
||||
} else if (
|
||||
e.scrollTop >= commentCard.top - sys_navBar &&
|
||||
e.scrollTop <= commentCard.bottom - sys_navBar
|
||||
) {
|
||||
state.curTab = 'comment';
|
||||
} else {
|
||||
state.curTab = 'detail';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-box {
|
||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||
border-radius: 30rpx;
|
||||
width: 134rpx;
|
||||
height: 56rpx;
|
||||
margin-left: 8rpx;
|
||||
border: 1px solid rgba(#fff, 0.4);
|
||||
.line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: #e5e5e7;
|
||||
}
|
||||
.sicon-back {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
}
|
||||
.sicon-home {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
}
|
||||
.sicon-more {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
}
|
||||
.icon-button {
|
||||
width: 67rpx;
|
||||
height: 56rpx;
|
||||
&-left:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 30rpx 0px 0px 30rpx;
|
||||
}
|
||||
&-right:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0px 30rpx 30rpx 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-box {
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(#fff, 0.6);
|
||||
border: 1rpx solid #ebebeb;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(#ffffff, 0.6);
|
||||
border: 1rpx solid #ebebeb;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.detail-tab-card {
|
||||
width: 50%;
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="progress-title ss-m-r-10"> 已抢{{ percent }}% </view>
|
||||
<view class="progress-box ss-flex ss-col-center">
|
||||
<view class="progerss-active" :style="{ width: percent < 10 ? '10%' : percent + '%' }">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-title {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.progress-box {
|
||||
width: 168rpx;
|
||||
height: 18rpx;
|
||||
background: #f6f6f6;
|
||||
border-radius: 9rpx;
|
||||
}
|
||||
|
||||
.progerss-active {
|
||||
height: 24rpx;
|
||||
background: linear-gradient(86deg, #f60600, #d00500);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view
|
||||
class="skeleton-wrap"
|
||||
:class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
|
||||
>
|
||||
<view class="skeleton-banner"></view>
|
||||
<view class="container-box">
|
||||
<view class="container-box-strip title ss-m-b-58"></view>
|
||||
<view class="container-box-strip ss-m-b-20"></view>
|
||||
<view class="container-box-strip ss-m-b-20"></view>
|
||||
<view class="container-box-strip w-364"></view>
|
||||
</view>
|
||||
<view class="container-box">
|
||||
<view class="ss-flex ss-row-between ss-m-b-34">
|
||||
<view class="container-box-strip w-380"></view>
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-m-b-34">
|
||||
<view class="container-box-strip w-556"></view>
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="container-box-strip w-556"></view>
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container-box">
|
||||
<view class="container-box-strip w-198 ss-m-b-42"></view>
|
||||
<view class="ss-flex">
|
||||
<view class="circle ss-m-r-12"></view>
|
||||
<view class="container-box-strip w-252"></view>
|
||||
</view>
|
||||
</view>
|
||||
<su-fixed bottom placeholder bg="bg-white">
|
||||
<view class="ui-tabbar-box">
|
||||
<view class="foot ss-flex ss-col-center">
|
||||
<view class="ss-m-r-54 ss-m-l-32">
|
||||
<view class="rec ss-m-b-8"></view>
|
||||
<view class="oval"></view>
|
||||
</view>
|
||||
<view class="ss-m-r-54">
|
||||
<view class="rec ss-m-b-8"></view>
|
||||
<view class="oval"></view>
|
||||
</view>
|
||||
<view class="ss-m-r-50">
|
||||
<view class="rec ss-m-b-8"></view>
|
||||
<view class="oval"></view>
|
||||
</view>
|
||||
<button class="ss-reset-button add-btn ui-Shadow-Main"></button>
|
||||
<button class="ss-reset-button buy-btn ui-Shadow-Main"></button>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const sys = computed(() => sheep.$store('sys'));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes loading {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-wrap {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
||||
.skeleton-banner {
|
||||
width: 100%;
|
||||
height: calc(100vh - 882rpx);
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.container-box {
|
||||
padding: 24rpx 18rpx;
|
||||
margin: 14rpx 20rpx;
|
||||
background: var(--ui-BG);
|
||||
animation: loading 1.4s ease infinite;
|
||||
|
||||
.container-box-strip {
|
||||
height: 40rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 470rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
.w-364 {
|
||||
width: 364rpx;
|
||||
}
|
||||
|
||||
.w-380 {
|
||||
width: 380rpx;
|
||||
}
|
||||
|
||||
.w-556 {
|
||||
width: 556rpx;
|
||||
}
|
||||
|
||||
.w-198 {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
.w-252 {
|
||||
width: 252rpx;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.ui-tabbar-box {
|
||||
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
|
||||
}
|
||||
|
||||
.foot {
|
||||
height: 100rpx;
|
||||
background: var(--ui-BG);
|
||||
.rec {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.oval {
|
||||
width: 38rpx;
|
||||
height: 22rpx;
|
||||
background: #f3f3f1;
|
||||
border-radius: 11rpx;
|
||||
}
|
||||
.add-btn {
|
||||
width: 214rpx;
|
||||
height: 72rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
background-color: var(--ui-BG-Main-light);
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
width: 214rpx;
|
||||
height: 72rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
|
||||
border-radius: 0 40rpx 40rpx 0;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<su-fixed bottom placeholder bg="bg-white">
|
||||
<view class="ui-tabbar-box">
|
||||
<view class="ui-tabbar ss-flex ss-col-center ss-row-between">
|
||||
<view
|
||||
v-if="collectIcon"
|
||||
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
@tap="onFavorite"
|
||||
>
|
||||
<block v-if="modelValue.favorite">
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/collect_1.gif')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">已收藏</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">收藏</view>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
v-if="serviceIcon"
|
||||
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
@tap="onChat"
|
||||
>
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/message.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">客服</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="shareIcon"
|
||||
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
@tap="showShareModal"
|
||||
>
|
||||
<image
|
||||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/share.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="item-title">分享</view>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
*
|
||||
* 底部导航
|
||||
*
|
||||
* @property {String} bg - 背景颜色Class
|
||||
* @property {String} ui - 自定义样式Class
|
||||
* @property {Boolean} noFixed - 是否定位
|
||||
* @property {Boolean} topRadius - 上圆角
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
|
||||
// 数据
|
||||
const state = reactive({});
|
||||
|
||||
// 接收参数
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
bg: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
bgStyles: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
ui: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
noFixed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
topRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
collectIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
serviceIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
shareIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const elStyles = computed(() => {
|
||||
return {
|
||||
'border-top-left-radius': props.topRadius + 'rpx',
|
||||
'border-top-right-radius': props.topRadius + 'rpx',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
});
|
||||
|
||||
const tabbarheight = (e) => {
|
||||
uni.setStorageSync('tabbar', e);
|
||||
};
|
||||
async function onFavorite() {
|
||||
const { error } = await sheep.$api.user.favorite.do(props.modelValue.id);
|
||||
if (error === 0) {
|
||||
if (props.modelValue.favorite) {
|
||||
props.modelValue.favorite = 0;
|
||||
} else {
|
||||
props.modelValue.favorite = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onChat = () => {
|
||||
sheep.$router.go('/pages/chat/index', {
|
||||
id: props.modelValue.id,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ui-tabbar-box {
|
||||
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
|
||||
}
|
||||
.ui-tabbar {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
|
||||
.detail-tabbar-item {
|
||||
width: 100rpx;
|
||||
|
||||
.item-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
line-height: 20rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<view v-if="state.list.length > 0" class="groupon-list detail-card ss-p-x-20">
|
||||
<view class="join-activity ss-flex ss-row-between ss-m-t-30">
|
||||
<view class="">已有{{ modelValue.sales }}人参与活动</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
<view
|
||||
v-for="(item, index) in state.list"
|
||||
@tap="sheep.$router.go('/pages/activity/groupon/detail', { id: item.id })"
|
||||
:key="index"
|
||||
class="ss-m-t-40 ss-flex ss-row-between border-bottom ss-p-b-30"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image :src="sheep.$url.cdn(item.leader.avatar)" class="user-avatar"></image>
|
||||
<view class="user-nickname ss-m-l-20 ss-line-1">{{ item.leader.nickname }}</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="ss-flex-col ss-col-bottom ss-m-r-20">
|
||||
<view class="title ss-flex ss-m-b-14">
|
||||
还差
|
||||
<view class="num">{{ item.num - item.current_num }}人</view>
|
||||
成团
|
||||
</view>
|
||||
<view class="end-time">{{ endTime(item.expire_time) }}</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<button class="ss-reset-button go-btn" @tap.stop="onJoinGroupon(item)"> 去参团 </button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
list: [],
|
||||
});
|
||||
const emits = defineEmits(['join']);
|
||||
|
||||
function onJoinGroupon(groupon) {
|
||||
emits('join', groupon);
|
||||
}
|
||||
|
||||
// 倒计时
|
||||
function endTime(time) {
|
||||
const durationTime = useDurationTime(time);
|
||||
|
||||
if (durationTime.ms <= 0) {
|
||||
return '该团已解散';
|
||||
}
|
||||
|
||||
let timeText = '剩余 ';
|
||||
timeText += `${durationTime.h}时`;
|
||||
timeText += `${durationTime.m}分`;
|
||||
timeText += `${durationTime.s}秒`;
|
||||
return timeText;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await sheep.$api.activity.getGrouponList({
|
||||
goods_id: props.modelValue.id,
|
||||
activity_id: props.modelValue.activity.id,
|
||||
});
|
||||
state.list = data.data;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-card {
|
||||
background-color: $white;
|
||||
margin: 14rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.groupon-list {
|
||||
.join-activity {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
.cicon-forward {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: #ececec;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
|
||||
.num {
|
||||
color: #ff6000;
|
||||
}
|
||||
}
|
||||
|
||||
.end-time {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.go-btn {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
||||
border-radius: 30rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<view class="list-goods-card ss-flex-col" @tap="onClick">
|
||||
<view class="md-img-box">
|
||||
<image class="goods-img md-img-box" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="md-goods-content ss-flex-col ss-row-around">
|
||||
<view class="md-goods-title ss-line-2 ss-m-x-20 ss-m-t-6 ss-m-b-16">{{ title }}</view>
|
||||
<view class="md-goods-subtitle ss-line-1 ss-p-y-10 ss-p-20">{{ subTitle }}</view>
|
||||
<view class="ss-flex ss-col-center ss-row-between ss-m-b-16 ss-m-x-20">
|
||||
<view class="md-goods-price text-price">{{ price }}</view>
|
||||
<view class="goods-origin-price text-price">{{ originPrice }}</view>
|
||||
<view class="sales-text">已售{{ sales }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
img: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
price: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
originPrice: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
sales: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['click']);
|
||||
const onClick = () => {
|
||||
emits('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.sales-text {
|
||||
font-size: 20rpx;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
.goods-origin-price {
|
||||
font-size: 20rpx;
|
||||
color: #c4c4c4;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.list-goods-card {
|
||||
overflow: hidden;
|
||||
width: 344rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 20rpx 4rpx rgba(199, 199, 199, 0.22);
|
||||
border-radius: 20rpx;
|
||||
|
||||
.md-img-box {
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
}
|
||||
|
||||
.md-goods-title {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
.md-goods-subtitle {
|
||||
background-color: var(--ui-BG-Main-tag);
|
||||
color: var(--ui-BG-Main);
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.md-goods-price {
|
||||
font-size: 30rpx;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<su-fixed
|
||||
alway
|
||||
:bgStyles="{ background: '#fff' }"
|
||||
:val="0"
|
||||
noNav
|
||||
:opacity="false"
|
||||
placeholder
|
||||
index="10090"
|
||||
>
|
||||
<su-status-bar />
|
||||
<view
|
||||
class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
||||
>
|
||||
<!-- 左 -->
|
||||
<view class="left-box">
|
||||
<text
|
||||
class="_icon-back back-icon"
|
||||
@tap="toBack"
|
||||
:style="[{ color: state.iconColor }]"
|
||||
></text>
|
||||
</view>
|
||||
<!-- 中 -->
|
||||
<uni-search-bar
|
||||
class="ss-flex-1"
|
||||
radius="33"
|
||||
:placeholder="placeholder"
|
||||
cancelButton="none"
|
||||
:focus="true"
|
||||
v-model="state.searchVal"
|
||||
@confirm="onSearch"
|
||||
/>
|
||||
<!-- 右 -->
|
||||
<view class="right">
|
||||
<text class="sicon-more" :style="[{ color: state.iconColor }]" @tap="showMenuTools" />
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="[capsuleStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { showMenuTools } from '@/sheep/hooks/useModal';
|
||||
|
||||
const sys_statusBar = sheep.$platform.device.statusBarHeight;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const capsuleStyle = {
|
||||
width: sheep.$platform.capsule.width + 'px',
|
||||
height: sheep.$platform.capsule.height + 'px',
|
||||
margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
iconColor: '#000',
|
||||
searchVal: '',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '搜索内容',
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['searchConfirm']);
|
||||
|
||||
// 返回
|
||||
const toBack = () => {
|
||||
sheep.$router.back();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const onSearch = () => {
|
||||
emits('searchConfirm', state.searchVal);
|
||||
};
|
||||
|
||||
const onTab = (item) => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.back-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.sicon-more {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<s-layout :onShareAppMessage="shareInfo" navbar="goods">
|
||||
<!-- 标题栏 -->
|
||||
<detailNavbar />
|
||||
<!-- 骨架屏 -->
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 空置页 -->
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null || !state.goodsInfo.activity"
|
||||
text="活动不存在或已结束"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="返回上一页"
|
||||
@clickAction="sheep.$router.back()"
|
||||
/>
|
||||
<block v-else>
|
||||
<view class="detail-swiper-selector">
|
||||
<!-- 商品图轮播 -->
|
||||
<su-swiper
|
||||
class="ss-m-b-14"
|
||||
isPreview
|
||||
:list="state.goodsSwiper"
|
||||
dotStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
|
||||
<view class="ss-flex ss-row-between ss-m-b-60">
|
||||
<view>
|
||||
<view class="price-box ss-flex ss-col-bottom ss-m-b-18">
|
||||
<view class="price-text ss-m-r-16">
|
||||
{{ goodsPrice }}
|
||||
</view>
|
||||
<view class="tig ss-flex ss-col-center">
|
||||
<view class="tig-icon ss-flex ss-col-center ss-row-center">
|
||||
<view class="groupon-tag">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/groupon-tag.png')"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tig-title">拼团价</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view
|
||||
class="origin-price ss-flex ss-col-center"
|
||||
v-if="state.goodsInfo.original_price"
|
||||
>
|
||||
单买价：
|
||||
<view class="origin-price-text">
|
||||
{{ state.goodsInfo.original_goods_price[0] || state.goodsInfo.original_price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="countdown-box" v-if="endTime.ms > 0">
|
||||
<view class="countdown-title ss-m-b-20">距结束仅剩</view>
|
||||
<view class="ss-flex countdown-time">
|
||||
<view class="ss-flex countdown-h">{{ endTime.h }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="countdown-title" v-else> 活动已结束 </view>
|
||||
</view>
|
||||
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.title }}</view>
|
||||
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.subtitle }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<!-- 规格 -->
|
||||
<detail-cell-sku
|
||||
v-model="state.selectedSkuPrice.goods_sku_text"
|
||||
:skus="state.goodsInfo.skus"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<!-- 服务 -->
|
||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
||||
<!-- 参数 -->
|
||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
||||
<!-- 玩法 -->
|
||||
<detail-cell
|
||||
v-if="state.goodsInfo.activity.richtext_id > 0"
|
||||
label="玩法"
|
||||
:value="state.goodsInfo.activity.richtext_title"
|
||||
@click="
|
||||
sheep.$router.go('/pages/public/richtext', {
|
||||
id: state.goodsInfo.activity.richtext_id,
|
||||
title: state.goodsInfo.activity.richtext_title,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 参团列表 -->
|
||||
<groupon-card-list
|
||||
v-if="state.goodsInfo.activity.rules.is_team_card === '1'"
|
||||
v-model="state.goodsInfo"
|
||||
@join="onJoinGroupon"
|
||||
/>
|
||||
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-groupon-sku
|
||||
:show="state.showSelectSku"
|
||||
:goodsInfo="state.goodsInfo"
|
||||
:grouponAction="state.grouponAction"
|
||||
v-model:grouponNum="state.grouponNum"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="onSkuClose"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
|
||||
<!-- 详情 -->
|
||||
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.content" />
|
||||
|
||||
<!-- 商品tabbar -->
|
||||
<!-- TODO: 已售罄、预热 判断 设计-->
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20">
|
||||
<button
|
||||
v-if="state.goodsInfo.activity.rules.is_alone == 1"
|
||||
class="ss-reset-button origin-price-btn ss-flex-col"
|
||||
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
|
||||
>
|
||||
<view class="btn-price">{{
|
||||
state.goodsInfo.original_goods_price[0] || state.goodsInfo.original_price
|
||||
}}</view>
|
||||
<view>原价购买</view>
|
||||
</button>
|
||||
<button v-else class="ss-reset-button origin-price-btn ss-flex-col">
|
||||
<view class="btn-title">{{
|
||||
state.grouponNum == 0 ? '阶梯团' : state.grouponNum + '人团'
|
||||
}}</view>
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button btn-tox ss-flex-col"
|
||||
@tap="onCreateGroupon"
|
||||
:class="
|
||||
state.goodsInfo.activity.status === 'ing' && state.goodsInfo.stock != 0
|
||||
? 'check-btn-box'
|
||||
: 'disabled-btn-box'
|
||||
"
|
||||
:disabled="state.goodsInfo.stock === 0 || state.goodsInfo.activity.status != 'ing'"
|
||||
>
|
||||
<view class="btn-price">{{ goodsPrice }}</view>
|
||||
<view v-if="state.goodsInfo.activity.status === 'ing'">
|
||||
<view v-if="state.goodsInfo.stock === 0">已售罄</view>
|
||||
<view v-else>立即开团</view>
|
||||
</view>
|
||||
<view v-else>{{ state.goodsInfo.activity.status_text }}</view>
|
||||
</button>
|
||||
</view>
|
||||
</detail-tabbar>
|
||||
</block>
|
||||
<!-- 轮播 -->
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, getCurrentInstance, computed, ref } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCell from './components/detail/detail-cell.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
||||
import detailCellParams from './components/detail/detail-cell-params.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import grouponCardList from './components/groupon/groupon-card-list.vue';
|
||||
import { useDurationTime, formatPrice, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
|
||||
|
||||
onPageScroll(() => {});
|
||||
const state = reactive({
|
||||
skeletonLoading: true,
|
||||
goodsId: 0,
|
||||
goodsInfo: {},
|
||||
goodsSwiper: [],
|
||||
showSelectSku: false,
|
||||
selectedSkuPrice: {},
|
||||
grouponId: 0,
|
||||
grouponType: '',
|
||||
grouponNum: 0,
|
||||
grouponAction: 'create',
|
||||
});
|
||||
|
||||
// 商品主价格
|
||||
const goodsPrice = computed(() => {
|
||||
if (isEmpty(state.selectedSkuPrice)) {
|
||||
return formatPrice(state.goodsInfo.price);
|
||||
}
|
||||
if (state.grouponType === 'groupon') {
|
||||
return state.selectedSkuPrice.groupon_price;
|
||||
}
|
||||
if (state.grouponType === 'groupon_ladder') {
|
||||
return state.selectedSkuPrice.ladder_price;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 倒计时
|
||||
const endTime = computed(() => {
|
||||
return useDurationTime(state.goodsInfo.activity.end_time);
|
||||
});
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSkuPrice = e;
|
||||
}
|
||||
|
||||
function onSkuClose() {
|
||||
state.showSelectSku = false;
|
||||
}
|
||||
|
||||
// 发起拼团
|
||||
function onCreateGroupon() {
|
||||
state.grouponAction = 'create';
|
||||
state.grouponId = 0;
|
||||
state.showSelectSku = true;
|
||||
}
|
||||
|
||||
// 点击参团
|
||||
function onJoinGroupon(groupon) {
|
||||
state.grouponAction = 'join';
|
||||
state.grouponId = groupon.id;
|
||||
state.grouponNum = groupon.num;
|
||||
state.showSelectSku = true;
|
||||
}
|
||||
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
buy_type: 'groupon',
|
||||
activity_id: state.goodsInfo.activity.id,
|
||||
groupon_id: state.grouponId,
|
||||
groupon_num: state.grouponNum,
|
||||
goods_list: [
|
||||
{
|
||||
goods_id: e.goods_id,
|
||||
goods_num: e.goods_num,
|
||||
goods_sku_price_id: e.id,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.goodsInfo?.activity)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: state.goodsInfo.title,
|
||||
image: sheep.$url.cdn(state.goodsInfo.image),
|
||||
params: {
|
||||
page: '3',
|
||||
query: state.goodsInfo.id + ',' + state.goodsInfo.activity.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: state.goodsInfo.title, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
|
||||
price: state.goodsInfo.price[0], // 商品价格
|
||||
original_price: state.goodsInfo.original_price, // 商品原价
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
onLoad(async (options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
return;
|
||||
}
|
||||
state.goodsId = options.id;
|
||||
// 加载商品信息
|
||||
const { error, data } = await sheep.$api.goods.detail(options.id, {
|
||||
activity_id: options.activity_id,
|
||||
});
|
||||
// 关闭骨架屏
|
||||
state.skeletonLoading = false;
|
||||
if (error === 0) {
|
||||
state.goodsInfo = data;
|
||||
state.grouponType = state.goodsInfo.activity_type;
|
||||
if (state.grouponType === 'groupon') {
|
||||
state.grouponNum = state.goodsInfo.activity.rules.team_num;
|
||||
}
|
||||
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.images);
|
||||
} else {
|
||||
// 未找到商品
|
||||
state.goodsInfo = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-card {
|
||||
background-color: $white;
|
||||
margin: 14rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 价格标题卡片
|
||||
.title-card {
|
||||
width: 710rpx;
|
||||
box-sizing: border-box;
|
||||
// height: 320rpx;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 10rpx;
|
||||
background-image: v-bind("sheep.$url.css('/static/img/shop/goods/groupon-bg.png')");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.price-box {
|
||||
.price-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: normal;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.origin-price {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
|
||||
.origin-price-text {
|
||||
text-decoration: line-through;
|
||||
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tig {
|
||||
border: 2rpx solid #ffffff;
|
||||
border-radius: 4rpx;
|
||||
width: 126rpx;
|
||||
height: 38rpx;
|
||||
|
||||
.tig-icon {
|
||||
margin-left: -2rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 4rpx 0 0 4rpx;
|
||||
|
||||
.groupon-tag {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tig-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
color: #ffffff;
|
||||
width: 86rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 0 4rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#000000, 0.1);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#000000, 0.1);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
line-height: 42rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
// 购买
|
||||
.buy-box {
|
||||
.disabled-btn-box[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
.check-btn-box {
|
||||
width: 248rpx;
|
||||
height: 80rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-left: -36rpx;
|
||||
background-image: v-bind("sheep.$url.css('/static/img/shop/goods/groupon-btn.png')");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
.disabled-btn-box {
|
||||
width: 248rpx;
|
||||
height: 80rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-left: -36rpx;
|
||||
background-image: v-bind(
|
||||
"sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png')"
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #999999;
|
||||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
|
||||
.origin-price-btn {
|
||||
width: 236rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(#ff5651, 0.1);
|
||||
color: #ff6000;
|
||||
border-radius: 40rpx 0px 0px 40rpx;
|
||||
line-height: normal;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.btn-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.btn-price {
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
.more-item-box {
|
||||
.more-item {
|
||||
width: 156rpx;
|
||||
height: 58rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.more-item-hover {
|
||||
background: rgba(#ffefe5, 0.32);
|
||||
color: #ff6000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//秒杀卡片
|
||||
.seckill-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.groupon-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
//活动卡片
|
||||
.activity-box {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.activity-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
|
||||
.activity-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-go {
|
||||
width: 70rpx;
|
||||
height: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<view>
|
||||
<s-layout :onShareAppMessage="shareInfo" navbar="goods">
|
||||
<!-- 标题栏 -->
|
||||
<detailNavbar />
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 下架/售罄提醒 -->
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null"
|
||||
text="商品不存在或已下架"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="再逛逛"
|
||||
actionUrl="/pages/goods/list"
|
||||
/>
|
||||
<block v-else>
|
||||
<view class="detail-swiper-selector">
|
||||
<!-- 商品轮播图 -->
|
||||
<su-swiper
|
||||
class="ss-m-b-14"
|
||||
isPreview
|
||||
:list="state.goodsSwiper"
|
||||
dotStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
|
||||
<view class="price-box ss-flex ss-col-bottom">
|
||||
<view class="price-text ss-m-r-16">
|
||||
{{ state.selectedSkuPrice.price || formatPrice(state.goodsInfo.price) }}
|
||||
</view>
|
||||
<view class="origin-price-text" v-if="state.goodsInfo.original_price > 0">
|
||||
{{ state.selectedSkuPrice.original_price || state.goodsInfo.original_price }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="sales-text">
|
||||
{{ formatSales(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="discounts-box ss-flex ss-row-between ss-m-b-28">
|
||||
<div class="tag-content">
|
||||
<view class="tag-box ss-flex">
|
||||
<view
|
||||
class="tag ss-m-r-10"
|
||||
v-for="promos in state.goodsInfo.promos"
|
||||
:key="promos.id"
|
||||
@tap="onActivity"
|
||||
>
|
||||
{{ promos.title }}
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<view
|
||||
class="get-coupon-box ss-flex ss-col-center ss-m-l-20"
|
||||
@tap="state.showModel = true"
|
||||
v-if="state.couponInfo.length"
|
||||
>
|
||||
<view class="discounts-title ss-m-r-8">领券</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.title }}</view>
|
||||
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.subtitle }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku
|
||||
v-model="state.selectedSkuPrice.goods_sku_text"
|
||||
:skus="state.goodsInfo.skus"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
||||
</view>
|
||||
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-sku
|
||||
:goodsInfo="state.goodsInfo"
|
||||
:show="state.showSelectSku"
|
||||
@addCart="onAddCart"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
|
||||
<!-- 详情 -->
|
||||
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.content" />
|
||||
|
||||
<!-- 活动跳转 -->
|
||||
<detail-activity-tip
|
||||
v-if="state.goodsInfo.activities"
|
||||
:data="state.goodsInfo"
|
||||
></detail-activity-tip>
|
||||
|
||||
<!-- 详情tabbar -->
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<!-- TODO: 缺货中 已售罄 判断 设计-->
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
|
||||
<button
|
||||
class="ss-reset-button add-btn ui-Shadow-Main"
|
||||
@tap="state.showSelectSku = true"
|
||||
>
|
||||
加入购物车
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button buy-btn ui-Shadow-Main"
|
||||
@tap="state.showSelectSku = true"
|
||||
>
|
||||
立即购买
|
||||
</button>
|
||||
</view>
|
||||
</detail-tabbar>
|
||||
<s-coupon-get
|
||||
v-model="state.couponInfo"
|
||||
:show="state.showModel"
|
||||
@close="state.showModel = false"
|
||||
@get="onGet"
|
||||
/>
|
||||
<s-activity-pop
|
||||
v-model="state.activityInfo"
|
||||
:show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false"
|
||||
/>
|
||||
</block>
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { formatSales, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
||||
import detailCellParams from './components/detail/detail-cell-params.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import detailActivityTip from './components/detail/detail-activity-tip.vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
// import detailActivityTip from './components/detail/detail-activity-tip.vue';
|
||||
// import detailTab from './components/detail/detail-tab.vue';
|
||||
// import detailCoupon from './components/detail/detail-coupon.vue';
|
||||
onPageScroll(() => {});
|
||||
|
||||
const state = reactive({
|
||||
goodsId: 0,
|
||||
skeletonLoading: true,
|
||||
goodsInfo: {},
|
||||
showSelectSku: false,
|
||||
goodsSwiper: [],
|
||||
selectedSkuPrice: {},
|
||||
showModel: false,
|
||||
total: 0,
|
||||
couponInfo: [],
|
||||
showActivityModel: false,
|
||||
activityInfo: [],
|
||||
});
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSkuPrice = e;
|
||||
}
|
||||
|
||||
// 添加购物车
|
||||
function onAddCart(e) {
|
||||
sheep.$store('cart').add(e);
|
||||
}
|
||||
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
goods_list: [
|
||||
{
|
||||
goods_id: e.goods_id,
|
||||
goods_num: e.goods_num,
|
||||
goods_sku_price_id: e.id,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
//营销活动
|
||||
function onActivity() {
|
||||
state.activityInfo = state.goodsInfo.promos;
|
||||
state.showActivityModel = true;
|
||||
}
|
||||
|
||||
//立即领取
|
||||
async function onGet(id) {
|
||||
const { error, msg } = await sheep.$api.coupon.get(id);
|
||||
if (error === 0) {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
});
|
||||
setTimeout(() => {
|
||||
getCoupon();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.goodsInfo)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: state.goodsInfo.title,
|
||||
image: sheep.$url.cdn(state.goodsInfo.image),
|
||||
desc: state.goodsInfo.subtitle,
|
||||
params: {
|
||||
page: '2',
|
||||
query: state.goodsInfo.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: state.goodsInfo.title, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
|
||||
price: state.goodsInfo.price[0], // 商品价格
|
||||
original_price: state.goodsInfo.original_price, // 商品原价
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
onLoad(async (options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
return;
|
||||
}
|
||||
state.goodsId = options.id;
|
||||
// 加载商品信息
|
||||
sheep.$api.goods.detail(state.goodsId).then((res) => {
|
||||
state.skeletonLoading = false;
|
||||
if (res.error === 0) {
|
||||
state.goodsInfo = res.data;
|
||||
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.images);
|
||||
} else {
|
||||
// 未找到商品
|
||||
state.goodsInfo = null;
|
||||
}
|
||||
});
|
||||
const { error, data } = await sheep.$api.coupon.listByGoods(state.goodsId);
|
||||
if (error === 0) {
|
||||
state.couponInfo = data;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-card {
|
||||
background-color: #ffff;
|
||||
margin: 14rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 价格标题卡片
|
||||
.title-card {
|
||||
.price-box {
|
||||
.price-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
line-height: 30rpx;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.origin-price-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: $gray-c;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sales-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $gray-c;
|
||||
}
|
||||
|
||||
.discounts-box {
|
||||
.tag-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tag-box {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tag {
|
||||
flex-shrink: 0;
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 4rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
background: var(--ui-BG-Main-tag);
|
||||
}
|
||||
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
color: var(--ui-BG-Main);
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 购买
|
||||
.buy-box {
|
||||
.add-btn {
|
||||
width: 214rpx;
|
||||
height: 72rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
background-color: var(--ui-BG-Main-light);
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
width: 214rpx;
|
||||
height: 72rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
|
||||
border-radius: 0 40rpx 40rpx 0;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
height: 60vh;
|
||||
.model-content {
|
||||
height: 56vh;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<s-layout
|
||||
navbar="normal"
|
||||
:leftWidth="0"
|
||||
:rightWidth="0"
|
||||
tools="search"
|
||||
:defaultSearch="state.keyword"
|
||||
@search="onSearch"
|
||||
>
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<su-tabs
|
||||
:list="state.tabList"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</view>
|
||||
<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
|
||||
<text v-if="state.iconStatus" class="sicon-goods-list"></text>
|
||||
<text v-else class="sicon-goods-card"></text>
|
||||
</view>
|
||||
</view>
|
||||
</su-sticky>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<su-popup
|
||||
:show="state.showFilter"
|
||||
type="top"
|
||||
round="10"
|
||||
:space="sys_navBar + 38"
|
||||
backgroundColor="#F6F6F6"
|
||||
:zIndex="10"
|
||||
@close="state.showFilter = false"
|
||||
>
|
||||
<view class="filter-list-box">
|
||||
<view
|
||||
class="filter-item"
|
||||
v-for="(item, index) in state.tabList[state.currentTab].list"
|
||||
:key="item.value"
|
||||
:class="[{ 'filter-item-active': index == state.curFilter }]"
|
||||
@tap="onFilterItem(index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view
|
||||
class="ss-p-l-20 ss-p-r-20 ss-m-b-20"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<s-goods-column
|
||||
class=""
|
||||
size="lg"
|
||||
:data="item"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
></s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="!state.iconStatus && state.pagination.total > 0"
|
||||
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top"
|
||||
>
|
||||
<view class="goods-list-box">
|
||||
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:data="item"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'left')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list-box">
|
||||
<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
:data="item"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'right')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
|
||||
</s-empty>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const emits = defineEmits(['close', 'change']);
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
currentSort: 'weigh',
|
||||
currentOrder: 'desc',
|
||||
currentTab: 0,
|
||||
filterParams: {},
|
||||
curFilter: 0,
|
||||
showFilter: false,
|
||||
iconStatus: false,
|
||||
categoryId: 0,
|
||||
tabList: [
|
||||
{
|
||||
name: '综合推荐',
|
||||
value: 'weigh',
|
||||
list: [
|
||||
{
|
||||
label: '综合推荐',
|
||||
sort: 'weigh',
|
||||
order: 'desc',
|
||||
},
|
||||
{
|
||||
label: '价格升序',
|
||||
sort: 'price',
|
||||
order: 'asc',
|
||||
},
|
||||
{
|
||||
label: '价格降序',
|
||||
sort: 'price',
|
||||
order: 'desc',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '销量',
|
||||
value: 'total_sales',
|
||||
},
|
||||
{
|
||||
name: '新品优先',
|
||||
value: 'create_time',
|
||||
},
|
||||
],
|
||||
loadStatus: '',
|
||||
keyword: '',
|
||||
leftGoodsList: [],
|
||||
rightGoodsList: [],
|
||||
});
|
||||
|
||||
// 加载瀑布流
|
||||
let count = 0;
|
||||
let leftHeight = 0;
|
||||
let rightHeight = 0;
|
||||
|
||||
function mountMasonry(height = 0, where = 'left') {
|
||||
if (!state.pagination.data[count]) return;
|
||||
|
||||
if (where === 'left') {
|
||||
leftHeight += height;
|
||||
} else {
|
||||
rightHeight += height;
|
||||
}
|
||||
if (leftHeight <= rightHeight) {
|
||||
state.leftGoodsList.push(state.pagination.data[count]);
|
||||
} else {
|
||||
state.rightGoodsList.push(state.pagination.data[count]);
|
||||
}
|
||||
count++;
|
||||
}
|
||||
|
||||
function emptyList() {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.leftGoodsList = [];
|
||||
state.rightGoodsList = [];
|
||||
count = 0;
|
||||
}
|
||||
//搜索
|
||||
function onSearch(e) {
|
||||
state.keyword = e;
|
||||
emptyList();
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, e);
|
||||
}
|
||||
|
||||
// 点击
|
||||
function onTabsChange(e) {
|
||||
if (state.tabList[e.index].list) {
|
||||
state.currentTab = e.index;
|
||||
state.showFilter = !state.showFilter;
|
||||
return;
|
||||
} else {
|
||||
state.showFilter = false;
|
||||
}
|
||||
if (e.index === state.currentTab) {
|
||||
return;
|
||||
} else {
|
||||
state.currentTab = e.index;
|
||||
}
|
||||
emptyList();
|
||||
|
||||
getList(e.value, state.currentOrder, state.categoryId, state.keyword);
|
||||
}
|
||||
|
||||
// 点击筛选项
|
||||
const onFilterItem = (val) => {
|
||||
state.curFilter = val;
|
||||
state.tabList[0].name = state.tabList[0].list[val].label;
|
||||
state.currentSort = state.tabList[0].list[val].sort;
|
||||
state.currentOrder = state.tabList[0].list[val].order;
|
||||
emptyList();
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
|
||||
state.showFilter = false;
|
||||
};
|
||||
|
||||
async function getList(Sort, Order, categoryId, keyword, page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.list({
|
||||
sort: Sort,
|
||||
order: Order,
|
||||
category_id: !keyword ? categoryId : '',
|
||||
list_rows,
|
||||
keyword: keyword,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let couponList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
mountMasonry();
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(
|
||||
state.currentSort,
|
||||
state.currentOrder,
|
||||
state.categoryId,
|
||||
state.keyword,
|
||||
state.pagination.current_page + 1,
|
||||
);
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.categoryId = options.categoryId;
|
||||
state.keyword = options.keyword;
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
|
||||
});
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.goods-box {
|
||||
&:nth-last-of-type(1) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.list-icon {
|
||||
width: 80rpx;
|
||||
.sicon-goods-card {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.sicon-goods-list {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.goods-card {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.list-filter-tabs {
|
||||
background-color: #fff;
|
||||
}
|
||||
.filter-list-box {
|
||||
padding: 28rpx 52rpx;
|
||||
.filter-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.filter-item-active {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<view>
|
||||
<s-layout :onShareAppMessage="state.shareInfo" navbar="goods">
|
||||
<!-- 标题栏 -->
|
||||
<detailNavbar />
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 空置页 -->
|
||||
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null"
|
||||
text="商品不存在或已下架"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="再逛逛"
|
||||
actionUrl="/pages/goods/list"
|
||||
/>
|
||||
<block v-else>
|
||||
<!-- 商品轮播图 -->
|
||||
<su-swiper
|
||||
class="ss-m-b-14 detail-swiper-selector"
|
||||
isPreview
|
||||
:list="state.goodsSwiper"
|
||||
dotStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-18">
|
||||
<view class="price-box ss-flex ss-col-bottom">
|
||||
<view v-if="goodsPrice.price > 0" class="price-text"> ￥{{ goodsPrice.price }} </view>
|
||||
<text v-if="goodsPrice.price > 0 && goodsPrice.score > 0">+</text>
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<view class="score-text ss-m-r-16">
|
||||
{{ goodsPrice.score }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="sales-text">
|
||||
{{ formatExchange(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="origin-price-text ss-m-b-60" v-if="state.goodsInfo.original_price">
|
||||
原价：￥{{ state.selectedSkuPrice.original_price || state.goodsInfo.original_price }}
|
||||
</view>
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.title }}</view>
|
||||
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.subtitle }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku
|
||||
v-model="state.selectedSkuPrice.goods_sku_text"
|
||||
:skus="state.goodsInfo.skus"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
||||
</view>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-sku
|
||||
:goodsInfo="state.goodsInfo"
|
||||
:show="state.showSelectSku"
|
||||
:isScore="true"
|
||||
@addCart="onAddCart"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
|
||||
<!-- 评价 -->
|
||||
<view class="detail-comment-selector">
|
||||
<detail-comment-card :goodsId="state.goodsId" />
|
||||
</view>
|
||||
|
||||
<!-- 详情 -->
|
||||
<view class="detail-content-selector"></view>
|
||||
<detail-content-card :content="state.goodsInfo.content" />
|
||||
|
||||
<!-- 详情tabbar -->
|
||||
<detail-tabbar v-model="state.goodsInfo" :shareIcon="false" :collectIcon="false">
|
||||
<!-- TODO: 缺货中 已售罄 判断 设计-->
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
|
||||
<button class="ss-reset-button buy-btn" @tap="state.showSelectSku = true">
|
||||
立即兑换
|
||||
</button>
|
||||
</view>
|
||||
</detail-tabbar>
|
||||
</block>
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { formatExchange, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
||||
import detailCellParams from './components/detail/detail-cell-params.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
|
||||
onPageScroll(() => {});
|
||||
|
||||
const state = reactive({
|
||||
goodsId: 0,
|
||||
skeletonLoading: true,
|
||||
goodsInfo: {},
|
||||
showSelectSku: false,
|
||||
goodsSwiper: [],
|
||||
selectedSkuPrice: {},
|
||||
shareInfo: {},
|
||||
showModel: false,
|
||||
total: 0,
|
||||
couponInfo: [],
|
||||
});
|
||||
|
||||
const goodsPrice = computed(() => {
|
||||
let price, score;
|
||||
if (isEmpty(state.selectedSkuPrice)) {
|
||||
price = state.goodsInfo.price[0];
|
||||
score = state.goodsInfo.score || 0;
|
||||
} else {
|
||||
price = state.selectedSkuPrice.price;
|
||||
score = state.selectedSkuPrice.score || 0;
|
||||
}
|
||||
return { price, score };
|
||||
});
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSkuPrice = e;
|
||||
}
|
||||
// 格式化价格
|
||||
function formatPrice(e) {
|
||||
if (Number(e[0]) > 0) {
|
||||
return e.length === 1 ? e[0] : e.join('~');
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
// 添加购物车
|
||||
function onAddCart(e) {
|
||||
sheep.$store('cart').add(e);
|
||||
}
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'score',
|
||||
goods_list: [
|
||||
{
|
||||
goods_id: e.goods_id,
|
||||
goods_num: e.goods_num,
|
||||
goods_sku_price_id: e.id,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
return;
|
||||
}
|
||||
state.goodsId = options.id;
|
||||
// 加载商品信息
|
||||
sheep.$api.app.scoreShopDetail(state.goodsId).then((res) => {
|
||||
state.skeletonLoading = false;
|
||||
if (res.error === 0) {
|
||||
state.goodsInfo = res.data;
|
||||
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.images);
|
||||
} else {
|
||||
// 未找到商品
|
||||
state.goodsInfo = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-card {
|
||||
background-color: #ffff;
|
||||
margin: 14rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 价格标题卡片
|
||||
.title-card {
|
||||
width: 710rpx;
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 10rpx;
|
||||
background-image: v-bind("sheep.$url.css('/static/img/shop/goods/score-bg.png')");
|
||||
background-repeat: no-repeat;
|
||||
.price-box {
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
.score-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
line-height: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.price-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
line-height: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
.origin-price-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: $gray-c;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.sales-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $gray-c;
|
||||
}
|
||||
|
||||
.discounts-box {
|
||||
.discounts-tag {
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 4rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
// background: rgba(#2aae67, 0.05);
|
||||
background: var(--ui-BG-Main-tag);
|
||||
}
|
||||
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
color: var(--ui-BG-Main);
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 购买
|
||||
.buy-box {
|
||||
.buy-btn {
|
||||
width: 630rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//秒杀卡片
|
||||
.seckill-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.groupon-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
//活动卡片
|
||||
.activity-box {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.activity-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
|
||||
.activity-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-go {
|
||||
width: 70rpx;
|
||||
height: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
height: 60vh;
|
||||
.model-content {
|
||||
height: 56vh;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<s-layout :onShareAppMessage="shareInfo" navbar="goods">
|
||||
<!-- 标题栏 -->
|
||||
<detailNavbar />
|
||||
<!-- 骨架屏 -->
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 空置页 -->
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null || !state.goodsInfo.activity"
|
||||
text="商品不存在或已下架"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="再逛逛"
|
||||
actionUrl="/pages/goods/list"
|
||||
/>
|
||||
<block v-else>
|
||||
<view class="detail-swiper-selector">
|
||||
<!-- 轮播 -->
|
||||
<su-swiper
|
||||
class="ss-m-b-14"
|
||||
isPreview
|
||||
:list="state.goodsSwiper"
|
||||
dotStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
|
||||
<view class="price-box ss-flex ss-row-between ss-m-b-18">
|
||||
<view class="ss-flex">
|
||||
<view class="price-text ss-m-r-16">
|
||||
{{ state.selectedSkuPrice.price || formatPrice(state.goodsInfo.price) }}
|
||||
</view>
|
||||
<view class="tig ss-flex ss-col-center">
|
||||
<view class="tig-icon ss-flex ss-col-center ss-row-center">
|
||||
<text class="cicon-alarm"></text>
|
||||
</view>
|
||||
<view class="tig-title">秒杀价</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="countdown-box" v-if="endTime.ms > 0">
|
||||
<view class="countdown-title ss-m-b-20">距结束仅剩</view>
|
||||
<view class="ss-flex countdown-time">
|
||||
<view class="ss-flex countdown-h">{{ endTime.h }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
|
||||
<view class="ss-m-x-4">:</view>
|
||||
<view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="countdown-title" v-else> 活动已结束 </view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-m-b-60">
|
||||
<view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.original_price">
|
||||
原价
|
||||
<view class="origin-price-text">
|
||||
{{ state.selectedSkuPrice.original_price || state.goodsInfo.original_price }}
|
||||
</view>
|
||||
</view>
|
||||
<detail-progress :percent="state.percent" />
|
||||
</view>
|
||||
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.title }}</view>
|
||||
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.subtitle }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku
|
||||
v-model="state.selectedSkuPrice.goods_sku_text"
|
||||
:skus="state.goodsInfo.skus"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<detail-cell-service v-model="state.goodsInfo.service" />
|
||||
<detail-cell-params v-model="state.goodsInfo.params" />
|
||||
</view>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-seckill-sku
|
||||
v-model="state.goodsInfo"
|
||||
:show="state.showSelectSku"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
|
||||
<!-- 详情 -->
|
||||
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.content" />
|
||||
|
||||
<!-- 详情tabbar -->
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<!-- TODO: 缺货中 已售罄 判断 设计-->
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20">
|
||||
<button
|
||||
class="ss-reset-button origin-price-btn ss-flex-col"
|
||||
v-if="state.goodsInfo.original_price"
|
||||
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
|
||||
>
|
||||
<view>
|
||||
<view class="btn-price">{{ state.goodsInfo.original_price }}</view>
|
||||
<view>原价购买</view>
|
||||
</view>
|
||||
</button>
|
||||
<button v-else class="ss-reset-button origin-price-btn ss-flex-col">
|
||||
<view
|
||||
class="no-original"
|
||||
:class="
|
||||
state.goodsInfo.stock === 0 || state.goodsInfo.activity.status != 'ing' ? '' : ''
|
||||
"
|
||||
>秒杀价</view
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button btn-box ss-flex-col"
|
||||
@tap="state.showSelectSku = true"
|
||||
:class="
|
||||
state.goodsInfo.activity.status === 'ing' && state.goodsInfo.stock != 0
|
||||
? 'check-btn-box'
|
||||
: 'disabled-btn-box'
|
||||
"
|
||||
:disabled="state.goodsInfo.stock === 0 || state.goodsInfo.activity.status != 'ing'"
|
||||
>
|
||||
<view class="btn-price">{{ state.goodsInfo.price[0] }}</view>
|
||||
<view v-if="state.goodsInfo.activity.status === 'ing'">
|
||||
<view v-if="state.goodsInfo.stock === 0">已售罄</view>
|
||||
<view v-else>立即秒杀</view>
|
||||
</view>
|
||||
<view v-else>{{ state.goodsInfo.activity.status_text }}</view>
|
||||
</button>
|
||||
</view>
|
||||
</detail-tabbar>
|
||||
</block>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { useDurationTime, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
||||
import detailCellParams from './components/detail/detail-cell-params.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import detailProgress from './components/detail/detail-progress.vue';
|
||||
|
||||
onPageScroll(() => {});
|
||||
const state = reactive({
|
||||
goodsId: 0,
|
||||
skeletonLoading: true,
|
||||
goodsInfo: {},
|
||||
showSelectSku: false,
|
||||
goodsSwiper: [],
|
||||
selectedSkuPrice: {},
|
||||
showModel: false,
|
||||
total: 0,
|
||||
percent: 0,
|
||||
price: '',
|
||||
});
|
||||
|
||||
// 倒计时
|
||||
const endTime = computed(() => {
|
||||
return useDurationTime(state.goodsInfo.activity.end_time);
|
||||
});
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSkuPrice = e;
|
||||
}
|
||||
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
buy_type: 'seckill',
|
||||
activity_id: state.goodsInfo.activity.id,
|
||||
goods_list: [
|
||||
{
|
||||
goods_id: e.goods_id,
|
||||
goods_num: e.goods_num,
|
||||
goods_sku_price_id: e.id,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.goodsInfo)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: state.goodsInfo.title,
|
||||
image: sheep.$url.cdn(state.goodsInfo.image),
|
||||
params: {
|
||||
page: '4',
|
||||
query: state.goodsInfo.id + ',' + state.goodsInfo.activity.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: state.goodsInfo.title, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
|
||||
price: state.goodsInfo.price[0], // 商品价格
|
||||
original_price: state.goodsInfo.original_price, // 商品原价
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
onLoad((options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
return;
|
||||
}
|
||||
state.goodsId = options.id;
|
||||
// 加载商品信息
|
||||
sheep.$api.goods
|
||||
.detail(options.id, {
|
||||
activity_id: options.activity_id,
|
||||
})
|
||||
.then((res) => {
|
||||
state.skeletonLoading = false;
|
||||
if (res.error === 0) {
|
||||
state.goodsInfo = res.data;
|
||||
state.percent =
|
||||
state.goodsInfo.stock + state.goodsInfo.sales > 0
|
||||
? (
|
||||
(state.goodsInfo.sales / (state.goodsInfo.sales + state.goodsInfo.stock)) *
|
||||
100
|
||||
).toFixed(2)
|
||||
: 0;
|
||||
state.percent = Number(state.percent);
|
||||
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.images);
|
||||
} else {
|
||||
// 未找到商品
|
||||
state.goodsInfo = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.disabled-btn-box[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
.detail-card {
|
||||
background-color: $white;
|
||||
margin: 14rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 价格标题卡片
|
||||
.title-card {
|
||||
width: 710rpx;
|
||||
box-sizing: border-box;
|
||||
// height: 320rpx;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 10rpx;
|
||||
background-image: v-bind("sheep.$url.css('/static/img/shop/goods/seckill-bg.png')");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.price-box {
|
||||
.price-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: normal;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.origin-price {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
|
||||
.origin-price-text {
|
||||
text-decoration: line-through;
|
||||
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tig {
|
||||
border: 2rpx solid #ffffff;
|
||||
border-radius: 4rpx;
|
||||
width: 126rpx;
|
||||
height: 38rpx;
|
||||
|
||||
.tig-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: -2rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 4rpx 0 0 4rpx;
|
||||
|
||||
.cicon-alarm {
|
||||
font-size: 32rpx;
|
||||
color: #fc6e6f;
|
||||
}
|
||||
}
|
||||
|
||||
.tig-title {
|
||||
width: 86rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 0 4rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#000000, 0.1);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#000000, 0.1);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.discounts-box {
|
||||
.discounts-tag {
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 4rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
// background: rgba(#2aae67, 0.05);
|
||||
background: var(--ui-BG-Main-tag);
|
||||
}
|
||||
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
color: var(--ui-BG-Main);
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
line-height: 42rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
// 购买
|
||||
.buy-box {
|
||||
.check-btn-box {
|
||||
width: 248rpx;
|
||||
height: 80rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-left: -36rpx;
|
||||
background-image: v-bind("sheep.$url.css('/static/img/shop/goods/seckill-btn.png')");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
|
||||
.disabled-btn-box {
|
||||
width: 248rpx;
|
||||
height: 80rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-left: -36rpx;
|
||||
background-image: v-bind(
|
||||
"sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png')"
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #999999;
|
||||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
.btn-price {
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
|
||||
.origin-price-btn {
|
||||
width: 236rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(#ff5651, 0.1);
|
||||
color: #ff6000;
|
||||
border-radius: 40rpx 0px 0px 40rpx;
|
||||
line-height: normal;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
.no-original {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//秒杀卡片
|
||||
.seckill-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.groupon-box {
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png')") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
//活动卡片
|
||||
.activity-box {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.activity-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
|
||||
.activity-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-go {
|
||||
width: 70rpx;
|
||||
height: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
|
||||
<s-empty
|
||||
v-if="state.list.length === 0"
|
||||
text="购物车空空如也,快去逛逛吧~"
|
||||
icon="/static/cart-empty.png"
|
||||
/>
|
||||
|
||||
<!-- 头部 -->
|
||||
<view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length">
|
||||
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<view class="header-left ss-flex ss-col-center ss-font-26">
|
||||
共
|
||||
<text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
|
||||
件商品
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
|
||||
取消
|
||||
</button>
|
||||
<button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
|
||||
编辑
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
|
||||
<view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
|
||||
<radio
|
||||
:checked="state.selectedIds.includes(item.id)"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
/>
|
||||
</view>
|
||||
<s-goods-item
|
||||
:title="item.goods.title"
|
||||
:img="item.sku_price.image || item.goods.image"
|
||||
:price="item.sku_price.price"
|
||||
:skuText="item.sku_price.goods_sku_text"
|
||||
priceColor="#FF3000"
|
||||
:titleWidth="400"
|
||||
>
|
||||
<template v-if="!state.editMode" v-slot:tool>
|
||||
<su-number-box
|
||||
:min="0"
|
||||
:max="item.sku_price.stock"
|
||||
:step="1"
|
||||
v-model="item.goods_num"
|
||||
@change="onNumberChange($event, item)"
|
||||
></su-number-box>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
|
||||
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
|
||||
<view class="footer-left ss-flex ss-col-center">
|
||||
<view class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
|
||||
<radio
|
||||
:checked="state.isAllSelected"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.7)"
|
||||
/>
|
||||
<view> 全选 </view>
|
||||
</view>
|
||||
<text>合计：</text>
|
||||
<view class="text-price price-text">
|
||||
{{ state.totalPriceSelected }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-right">
|
||||
<button
|
||||
v-if="state.editMode"
|
||||
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
|
||||
@tap="onDelete"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
去结算
|
||||
{{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive, unref } from 'vue';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const cart = sheep.$store('cart');
|
||||
|
||||
const state = reactive({
|
||||
editMode: false,
|
||||
list: computed(() => cart.list),
|
||||
selectedList: [],
|
||||
selectedIds: computed(() => cart.selectedIds),
|
||||
isAllSelected: computed(() => cart.isAllSelected),
|
||||
totalPriceSelected: computed(() => cart.totalPriceSelected),
|
||||
});
|
||||
|
||||
// 单选选中
|
||||
function onSelectSingle(id) {
|
||||
cart.selectSingle(id);
|
||||
}
|
||||
// 全选
|
||||
function onSelectAll() {
|
||||
cart.selectAll(!state.isAllSelected);
|
||||
}
|
||||
|
||||
// 结算
|
||||
function onConfirm() {
|
||||
let goods_list = [];
|
||||
state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
|
||||
state.selectedList.map((item) => {
|
||||
goods_list.push({
|
||||
goods_id: item.goods_id,
|
||||
goods_num: item.goods_num,
|
||||
goods_sku_price_id: item.goods_sku_price_id,
|
||||
});
|
||||
});
|
||||
if (goods_list.length === 0) {
|
||||
sheep.$helper.toast('请选择商品');
|
||||
return;
|
||||
}
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
goods_list,
|
||||
from: 'cart',
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
function onNumberChange(e, cartItem) {
|
||||
if (e === 0) {
|
||||
cart.delete(cartItem.id);
|
||||
return;
|
||||
}
|
||||
cart.update({
|
||||
goods_id: cartItem.goods_id,
|
||||
goods_num: e,
|
||||
goods_sku_price_id: cartItem.goods_sku_price_id,
|
||||
});
|
||||
}
|
||||
async function onDelete() {
|
||||
cart.delete(state.selectedIds);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ui-fixed) {
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
width: 100%;
|
||||
|
||||
.cart-header {
|
||||
height: 70rpx;
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: v-bind('sys_navBar') rpx;
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cart-footer {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.pay-btn {
|
||||
width: 180rpx;
|
||||
height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
margin-top: 70rpx;
|
||||
.goods-box {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
|
||||
<view class="s-category">
|
||||
<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
|
||||
<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
|
||||
<view
|
||||
class="menu-item ss-flex"
|
||||
v-for="(item, index) in state.categoryList?.children"
|
||||
:key="item.id"
|
||||
:class="[{ 'menu-item-active': index == state.activeMenu }]"
|
||||
@tap="onMenu(index)"
|
||||
>
|
||||
<view class="menu-title ss-line-1">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view
|
||||
class="goods-list-box"
|
||||
scroll-y
|
||||
:style="[{ height: pageHeight + 'px' }]"
|
||||
v-if="state.categoryList?.children?.length"
|
||||
>
|
||||
<image
|
||||
v-if="state.categoryList.children[state.activeMenu].image"
|
||||
class="banner-img"
|
||||
:src="sheep.$url.cdn(state.categoryList.children[state.activeMenu].image)"
|
||||
mode="widthFix"
|
||||
>
|
||||
</image>
|
||||
<first-one
|
||||
v-if="state.categoryList.style === 'first_one'"
|
||||
:data="state.categoryList"
|
||||
:activeMenu="state.activeMenu"
|
||||
:pagination="state.pagination"
|
||||
/>
|
||||
<first-two
|
||||
v-if="state.categoryList.style === 'first_two'"
|
||||
:data="state.categoryList"
|
||||
:activeMenu="state.activeMenu"
|
||||
:pagination="state.pagination"
|
||||
/>
|
||||
<second-one
|
||||
v-if="state.categoryList.style === 'second_one'"
|
||||
:data="state.categoryList"
|
||||
:activeMenu="state.activeMenu"
|
||||
:pagination="state.pagination"
|
||||
/>
|
||||
<third-one
|
||||
v-if="state.categoryList.style === 'third_one'"
|
||||
:data="state.categoryList"
|
||||
:activeMenu="state.activeMenu"
|
||||
:pagination="state.pagination"
|
||||
/>
|
||||
<uni-load-more
|
||||
v-if="
|
||||
(state.categoryList.style === 'first_one' ||
|
||||
state.categoryList.style === 'first_two') &&
|
||||
state.pagination.total > 0
|
||||
"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '点击查看更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import secondOne from './components/second-one.vue';
|
||||
import thirdOne from './components/third-one.vue';
|
||||
import firstOne from './components/first-one.vue';
|
||||
import firstTwo from './components/first-two.vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
const state = reactive({
|
||||
categoryList: [],
|
||||
activeMenu: '0',
|
||||
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
const { screenHeight, safeAreaInsets, screenWidth, safeArea } = sheep.$platform.device;
|
||||
const pageHeight = computed(() => safeArea.height - 44 - 50);
|
||||
|
||||
async function getList(options) {
|
||||
const { error, data } = await sheep.$api.category.list({
|
||||
id: options.id,
|
||||
});
|
||||
if (error === 0) {
|
||||
state.categoryList = data;
|
||||
}
|
||||
}
|
||||
|
||||
const onMenu = (val) => {
|
||||
state.activeMenu = val;
|
||||
if (state.categoryList.style === 'first_one' || state.categoryList.style === 'first_two') {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
getGoodsList(state.categoryList.children[val].id);
|
||||
}
|
||||
};
|
||||
|
||||
async function getGoodsList(id, page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.list({
|
||||
category_id: id,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let couponList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponList,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getGoodsList(
|
||||
state.categoryList.children[state.activeMenu].id,
|
||||
state.pagination.current_page + 1,
|
||||
);
|
||||
}
|
||||
}
|
||||
onLoad(async (options) => {
|
||||
await getList(options);
|
||||
if (state.categoryList.style === 'first_one' || state.categoryList.style === 'first_two') {
|
||||
getGoodsList(state.categoryList.children[0].id);
|
||||
}
|
||||
});
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s-category {
|
||||
:deep() {
|
||||
.side-menu-wrap {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
padding-left: 12rpx;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.menu-item {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
transition: all linear 0.2s;
|
||||
|
||||
.menu-title {
|
||||
line-height: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-left: 28rpx;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 64rpx;
|
||||
height: 12rpx;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--ui-BG-Main-gradient),
|
||||
var(--ui-BG-Main-light)
|
||||
) !important;
|
||||
position: absolute;
|
||||
left: -64rpx;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-item-active {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: 0;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list-box {
|
||||
background-color: #fff;
|
||||
width: calc(100vw - 100px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: calc(100vw - 130px);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="ss-flex-col">
|
||||
<view class="goods-box" v-for="item in pagination.data" :key="item.id">
|
||||
<s-goods-column
|
||||
size="sl"
|
||||
:data="item"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
></s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
activeMenu: [Number, String],
|
||||
pagination: Object,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-box {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="ss-flex flex-wrap">
|
||||
<view class="goods-box" v-for="item in pagination?.data" :key="item.id">
|
||||
<view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
|
||||
<view class="goods-img">
|
||||
<image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="goods-content">
|
||||
<view class="goods-title ss-line-1 ss-m-b-28">{{ item.title }}</view>
|
||||
<view class="goods-price">￥{{ item.price[0] }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
activeMenu: [Number, String],
|
||||
pagination: Object,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-box {
|
||||
width: calc((100% - 20rpx) / 2);
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
height: 246rpx;
|
||||
border-radius: 10rpx 10rpx 0px 0px;
|
||||
}
|
||||
|
||||
.goods-content {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
|
||||
padding: 20rpx 0 32rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 10rpx 10rpx;
|
||||
|
||||
.goods-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
|
||||
<view class="title-line-left"></view>
|
||||
<view class="title-text ss-p-x-20">{{ props.data.children[activeMenu].name }}</view>
|
||||
<view class="title-line-right"></view>
|
||||
</view>
|
||||
<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
|
||||
<view
|
||||
class="goods-item"
|
||||
v-for="item in props.data.children[activeMenu].children"
|
||||
:key="item.id"
|
||||
>
|
||||
<image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFill"></image>
|
||||
<view class="ss-p-10">
|
||||
<view class="goods-title ss-line-1">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
activeMenu: [Number, String],
|
||||
pagination: Object,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-box {
|
||||
.title-line-left,
|
||||
.title-line-right {
|
||||
width: 15px;
|
||||
height: 1px;
|
||||
background: #d2d2d2;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: calc((100% - 20px) / 3);
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: calc((100vw - 140px) / 3);
|
||||
height: calc((100vw - 140px) / 3);
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: $red;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<view>
|
||||
<view v-for="item in props.data.children[activeMenu].children" :key="item.id">
|
||||
<view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
|
||||
<view class="title-text">{{ item.name }}</view>
|
||||
<button
|
||||
class="ss-reset-button more-btn"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/list', {
|
||||
categoryId: item.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
查看更多
|
||||
<text class="cicon-forward"></text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
|
||||
<view class="goods-item" v-for="i in item.children" :key="i">
|
||||
<view
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/list', {
|
||||
categoryId: i.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<image class="goods-img" :src="sheep.$url.cdn(i.image)" mode="aspectFill"></image>
|
||||
<view class="ss-p-10">
|
||||
<view class="goods-title ss-line-1">{{ i.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
activeMenu: [Number, String],
|
||||
pagination: Object,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-box {
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: calc((100% - 20px) / 3);
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: calc((100vw - 140px) / 3);
|
||||
height: calc((100vw - 140px) / 3);
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: $red;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view>
|
||||
<s-layout
|
||||
title="首页"
|
||||
navbar="custom"
|
||||
tabbar="/pages/index/index"
|
||||
:bgStyle="template.style?.background"
|
||||
:navbarStyle="template.style?.navbar"
|
||||
onShareAppMessage
|
||||
>
|
||||
<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
|
||||
<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
|
||||
</s-block>
|
||||
<!-- 广告模块 -->
|
||||
<s-popup-image />
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import $share from '@/sheep/platform/share';
|
||||
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar();
|
||||
|
||||
const template = computed(() => sheep.$store('app').template.home);
|
||||
|
||||
onLoad((options) => {
|
||||
// #ifdef MP
|
||||
// 小程序识别二维码
|
||||
if (options.scene) {
|
||||
const sceneParams = decodeURIComponent(options.scene).split('=');
|
||||
options[sceneParams[0]] = sceneParams[1];
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 预览模板
|
||||
if (options.templateId) {
|
||||
sheep.$store('app').init(options.templateId);
|
||||
}
|
||||
|
||||
// 解析分享信息
|
||||
if (options.spm) {
|
||||
$share.decryptSpm(options.spm);
|
||||
}
|
||||
|
||||
// 进入指定页面(完整页面路径)
|
||||
if (options.page) {
|
||||
sheep.$router.go(decodeURIComponent(options.page));
|
||||
}
|
||||
});
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
sheep.$store('app').init();
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
onPageScroll(() => {});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<!-- 空登陆页 -->
|
||||
<view></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isEmpty } from 'lodash';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
|
||||
onLoad(async (options) => {
|
||||
// #ifdef H5
|
||||
let event = '';
|
||||
if (options.login_code) {
|
||||
event = 'login';
|
||||
const { error } = await sheep.$platform.useProvider().login(options.login_code);
|
||||
if (error === 0) {
|
||||
sheep.$store('user').getInfo();
|
||||
}
|
||||
}
|
||||
if (options.bind_code) {
|
||||
event = 'bind';
|
||||
const { error } = await sheep.$platform.useProvider().bind(options.bind_code);
|
||||
}
|
||||
|
||||
// 检测H5登录回调
|
||||
let returnUrl = uni.getStorageSync('returnUrl');
|
||||
if (returnUrl) {
|
||||
uni.removeStorage('returnUrl');
|
||||
location.replace(returnUrl);
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: '/',
|
||||
});
|
||||
}
|
||||
|
||||
// #endif
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<s-layout
|
||||
:title="page.name"
|
||||
navbar="custom"
|
||||
:bgStyle="page.style?.background"
|
||||
:navbarStyle="page.style?.navbar"
|
||||
onShareAppMessage
|
||||
>
|
||||
<s-block v-for="(item, index) in page.list" :key="index" :styles="item.style">
|
||||
<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
|
||||
</s-block>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
|
||||
const page = reactive({
|
||||
name: '',
|
||||
list: [],
|
||||
style: {},
|
||||
});
|
||||
onLoad(async (options) => {
|
||||
let id;
|
||||
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
|
||||
// #ifdef MP
|
||||
// 小程序预览自定义页面
|
||||
if (options.scene) {
|
||||
const sceneParams = decodeURIComponent(options.scene).split('=');
|
||||
id = sceneParams[1];
|
||||
}
|
||||
// #endif
|
||||
|
||||
const { error, data } = await sheep.$api.app.page(id);
|
||||
if (error === 0) {
|
||||
page.name = data.name;
|
||||
page.list = data.diypage?.page?.data;
|
||||
page.style = data.diypage?.page?.style;
|
||||
}
|
||||
});
|
||||
|
||||
onPageScroll(() => {});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="搜索" :bgStyle="{ color: '#FFF' }">
|
||||
<view class="ss-p-x-24">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-search-bar
|
||||
class="ss-flex-1"
|
||||
radius="33"
|
||||
placeholder="请输入关键字"
|
||||
cancelButton="none"
|
||||
:focus="true"
|
||||
@confirm="onSearch"
|
||||
/>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-col-center">
|
||||
<view class="serach-history">搜索历史</view>
|
||||
<button class="clean-history ss-reset-button" @tap="onDelete"> 清除搜索历史 </button>
|
||||
</view>
|
||||
<view class="ss-flex ss-col-center ss-row-left ss-flex-wrap">
|
||||
<button
|
||||
class="history-btn ss-reset-button"
|
||||
@tap="onSearch(item)"
|
||||
v-for="(item, index) in state.historyTag"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
const state = reactive({
|
||||
historyTag: [],
|
||||
});
|
||||
|
||||
function onSearch(res) {
|
||||
if (res.value) {
|
||||
if (!state.historyTag.includes(res.value)) {
|
||||
let search = getArr(state.historyTag, res.value);
|
||||
uni.setStorageSync('searchHistory', search);
|
||||
sheep.$router.go('/pages/goods/list', { keyword: res.value });
|
||||
} else {
|
||||
sheep.$router.go('/pages/goods/list', { keyword: res.value });
|
||||
}
|
||||
} else {
|
||||
sheep.$router.go('/pages/goods/list', { keyword: res });
|
||||
}
|
||||
}
|
||||
|
||||
function getArr(list, item) {
|
||||
let arr = list;
|
||||
let length = 10; //队列长度
|
||||
arr.length < length ? arr.unshift(item) : arr.pop();
|
||||
return arr;
|
||||
}
|
||||
|
||||
function onDelete() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认清除搜索历史吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
state.historyTag = [];
|
||||
uni.removeStorageSync('search');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
onLoad(() => {
|
||||
uni.getStorage({
|
||||
key: 'searchHistory',
|
||||
success: function (res) {
|
||||
state.historyTag = res.data;
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.serach-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.uni-searchbar {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.serach-history {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.clean-history {
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.history-btn {
|
||||
padding: 0 38rpx;
|
||||
height: 60rpx;
|
||||
background: #f5f6f8;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
max-width: 690rpx;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<s-layout
|
||||
title="我的"
|
||||
tabbar="/pages/index/user"
|
||||
navbar="custom"
|
||||
:bgStyle="template.style?.background"
|
||||
:navbarStyle="template.style?.navbar"
|
||||
onShareAppMessage
|
||||
:showFloatButton="true"
|
||||
>
|
||||
<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
|
||||
<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
|
||||
</s-block>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar();
|
||||
|
||||
const template = computed(() => sheep.$store('app').template.user);
|
||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||
|
||||
onShow(() => {
|
||||
sheep.$store('user').updateUserData();
|
||||
});
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
sheep.$store('user').updateUserData();
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
onPageScroll(() => {});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,353 @@
|
||||
<!-- 订单详情 -->
|
||||
<template>
|
||||
<s-layout title="申请售后">
|
||||
<!-- 售后商品 -->
|
||||
<view class="goods-box">
|
||||
<s-goods-item
|
||||
:img="state.goodsItem.goods_image"
|
||||
:title="state.goodsItem.goods_title"
|
||||
:skuText="state.goodsItem.goods_sku_text"
|
||||
:price="state.goodsItem.goods_price"
|
||||
:num="state.goodsItem.goods_num"
|
||||
></s-goods-item>
|
||||
</view>
|
||||
|
||||
<uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
|
||||
<!-- 售后类型 -->
|
||||
<view class="refund-item">
|
||||
<view class="item-title ss-m-b-20">售后类型</view>
|
||||
<view class="ss-flex-col">
|
||||
<view
|
||||
class="ss-flex ss-col-center ss-p-y-10"
|
||||
v-for="(item, index) in state.refundTypeList"
|
||||
:key="index"
|
||||
@tap="formData.type = item.value"
|
||||
>
|
||||
<radio
|
||||
:checked="formData.type === item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
/>
|
||||
<view class="item-value">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 申请原因 -->
|
||||
<view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
|
||||
<text class="item-title">申请原因</text>
|
||||
<view class="ss-flex refund-cause ss-col-center">
|
||||
<text class="ss-m-r-20" v-if="formData.reason">{{ formData.reason }}</text>
|
||||
<text class="ss-m-r-20" v-else>请选择申请原因~</text>
|
||||
<!-- <text class="ss-iconfont _icon-forward" style="color: #666"></text> -->
|
||||
<text class="cicon-forward" style="height: 28rpx"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refund-item u-m-b-20">
|
||||
<view class="item-title ss-m-b-20">联系方式</view>
|
||||
<view class="input-box u-flex">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="number"
|
||||
v-model="formData.mobile"
|
||||
placeholder="请输入您的联系电话"
|
||||
paddingLeft="10"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 留言 -->
|
||||
<view class="refund-item">
|
||||
<view class="item-title ss-m-b-20">相关描述</view>
|
||||
<view class="describe-box">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="describe-content"
|
||||
type="textarea"
|
||||
maxlength="120"
|
||||
autoHeight
|
||||
v-model="formData.content"
|
||||
placeholder="客官~请描述您遇到的问题，建议上传照片"
|
||||
></uni-easyinput>
|
||||
<view class="upload-img">
|
||||
<s-uploader
|
||||
v-model:url="formData.images"
|
||||
fileMediatype="image"
|
||||
limit="9"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<!-- 底部按钮 -->
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="foot-wrap">
|
||||
<view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')"
|
||||
>联系客服</button
|
||||
>
|
||||
<button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<!-- 申请原因弹窗 -->
|
||||
|
||||
<su-popup :show="state.showModal" round="10" :showClose="true" @close="state.showModal = false">
|
||||
<view class="modal-box page_box">
|
||||
<view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center"
|
||||
>申请原因</view
|
||||
>
|
||||
<view class="modal-content content_box">
|
||||
<view
|
||||
class="ss-flex ss-col-center"
|
||||
v-for="item in state.refundReasonList"
|
||||
:key="item.value"
|
||||
>
|
||||
<view class="ss-flex-1 ss-p-20" @tap="onTitle(item.value, item.title)">{{
|
||||
item.title
|
||||
}}</view>
|
||||
<view class="radio">
|
||||
<radio-group @change="onChange(item.value, item.title)">
|
||||
<label class="radio">
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
:checked="item.value === state.currentValue"
|
||||
/>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason"
|
||||
>确定</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive, ref, unref } from 'vue';
|
||||
const form = ref(null);
|
||||
const state = reactive({
|
||||
showModal: false,
|
||||
currentValue: 0,
|
||||
goodsItem: {},
|
||||
// showSuccess: false,
|
||||
reasonText: '',
|
||||
//售后类型
|
||||
refundTypeList: [
|
||||
{
|
||||
text: '仅退款',
|
||||
value: 'refund',
|
||||
},
|
||||
{
|
||||
text: '退/换货',
|
||||
value: 'return',
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
value: 'other',
|
||||
},
|
||||
],
|
||||
refundReasonList: [
|
||||
{
|
||||
value: '1',
|
||||
title: '卖家发错货了',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
title: '退运费',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
title: '大小/重量与商品描述不符',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
title: '生产日期/保质期与商品描述不符',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
title: '质量问题',
|
||||
},
|
||||
{
|
||||
value: '6',
|
||||
title: '我不想要了',
|
||||
},
|
||||
],
|
||||
});
|
||||
const formData = reactive({
|
||||
type: '',
|
||||
reason: '',
|
||||
mobile: '',
|
||||
content: '',
|
||||
images: [],
|
||||
});
|
||||
const rules = reactive({});
|
||||
|
||||
// 提交表单
|
||||
async function submit() {
|
||||
let data = {
|
||||
...formData,
|
||||
order_id: state.goodsItem.order_id,
|
||||
order_item_id: state.goodsItem.id,
|
||||
};
|
||||
const res = await sheep.$api.order.aftersale.apply(data);
|
||||
if (res.error === 0) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
});
|
||||
// state.showSuccess = true;
|
||||
sheep.$router.go('/pages/order/aftersale/list');
|
||||
}
|
||||
}
|
||||
|
||||
//选择申请原因
|
||||
function onChange(val, title) {
|
||||
state.currentValue = val;
|
||||
state.reasonText = title;
|
||||
}
|
||||
//确定
|
||||
function onReason() {
|
||||
formData.reason = state.reasonText;
|
||||
state.showModal = false;
|
||||
}
|
||||
|
||||
function onTitle(e, title) {
|
||||
state.currentValue = e;
|
||||
state.reasonText = title;
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.goodsItem = JSON.parse(options.item);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
// margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
// 售后项目
|
||||
.refund-item {
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
padding: 30rpx;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
// 留言
|
||||
.describe-box {
|
||||
width: 690rpx;
|
||||
background: rgba(249, 250, 251, 1);
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.describe-content {
|
||||
height: 200rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 联系方式
|
||||
.input-box {
|
||||
height: 84rpx;
|
||||
background: rgba(249, 250, 251, 1);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.foot-wrap {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.foot_box {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.sub-btn {
|
||||
width: 336rpx;
|
||||
line-height: 74rpx;
|
||||
border-radius: 38rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.contcat-btn {
|
||||
width: 336rpx;
|
||||
line-height: 74rpx;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
border-radius: 38rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
width: 750rpx;
|
||||
// height: 680rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background: #fff;
|
||||
|
||||
.modal-head {
|
||||
height: 100rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.modal-foot {
|
||||
.close-btn {
|
||||
width: 710rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-box {
|
||||
width: 600rpx;
|
||||
padding: 90rpx 0 64rpx 0;
|
||||
|
||||
.cicon-check-round {
|
||||
font-size: 96rpx;
|
||||
color: #04b750;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
width: 492rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
|
||||
border-radius: 35rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,350 @@
|
||||
<!-- 售后详情 -->
|
||||
<template>
|
||||
<s-layout title="售后详情" navbar="inner">
|
||||
<view class="content_box" v-if="JSON.stringify(state.info) != '{}'">
|
||||
<!-- 步骤条 -->
|
||||
<!-- TODO-jj: 步骤条样式 -->
|
||||
<view
|
||||
class="steps-box ss-flex"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- <uni-steps :options="state.list" :active="state.active" active-color="#fff" /> -->
|
||||
<view class="ss-flex">
|
||||
<view class="steps-item" v-for="(item, index) in state.list" :key="index">
|
||||
<view class="ss-flex">
|
||||
<text
|
||||
class="sicon-circleclose"
|
||||
v-if="
|
||||
(state.list.length - 1 == index && state.info.aftersale_status === -2) ||
|
||||
(state.list.length - 1 == index && state.info.aftersale_status === -1)
|
||||
"
|
||||
></text>
|
||||
<text
|
||||
class="sicon-circlecheck"
|
||||
v-else
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'"
|
||||
></text>
|
||||
|
||||
<view
|
||||
v-if="state.list.length - 1 != index"
|
||||
class="line"
|
||||
:class="state.active >= index ? 'activity-bg' : 'info-bg'"
|
||||
></view>
|
||||
</view>
|
||||
<view
|
||||
class="steps-item-title"
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'"
|
||||
>{{ item.title }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务状态 -->
|
||||
<view
|
||||
class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.aftersaleId })"
|
||||
>
|
||||
<view class="">
|
||||
<view class="status-text">{{ state.info.aftersale_status_desc }}</view>
|
||||
<view class="status-time">{{ state.info.update_time }}</view>
|
||||
</view>
|
||||
<text class="ss-iconfont _icon-forward" style="color: #666"></text>
|
||||
</view>
|
||||
|
||||
<!-- 退款金额 -->
|
||||
<view class="aftersale-money ss-flex ss-col-center ss-row-between">
|
||||
<view class="aftersale-money--title">退款总额</view>
|
||||
<view class="aftersale-money--num">￥{{ state.info.refund_fee }}</view>
|
||||
</view>
|
||||
<!-- 服务商品 -->
|
||||
<view class="order-shop">
|
||||
<s-goods-item
|
||||
:title="state.info.goods_title"
|
||||
:price="state.info.goods_price"
|
||||
:img="state.info.goods_image"
|
||||
priceColor="#333333"
|
||||
:titleWidth="480"
|
||||
:skuText="state.info.goods_sku_text"
|
||||
:num="state.info.goods_num"
|
||||
></s-goods-item>
|
||||
</view>
|
||||
|
||||
<!-- 服务内容 -->
|
||||
<view class="aftersale-content">
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">服务单号：</view>
|
||||
<view class="item-content ss-m-r-16">{{ state.info.aftersale_sn }}</view>
|
||||
<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">申请时间：</view>
|
||||
<view class="item-content">{{ state.info.create_time }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">售后类型：</view>
|
||||
<view class="item-content">{{ state.info.type_text }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">申请原因：</view>
|
||||
<view class="item-content">{{ state.info.reason }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">相关描述：</view>
|
||||
<view class="item-content">{{ state.info.content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-if="state.info === null" icon="/static/order-empty.png" text="暂无该订单售后详情" />
|
||||
<su-fixed bottom placeholder bg="bg-white" v-if="JSON.stringify(state.info) != '{}'">
|
||||
<view class="foot_box">
|
||||
<button
|
||||
class="ss-reset-button btn"
|
||||
v-if="state.info.btns?.includes('cancel')"
|
||||
@tap="onApply(state.info.id)"
|
||||
>取消申请</button
|
||||
>
|
||||
<!-- <button
|
||||
class="ss-reset-button btn"
|
||||
v-if="state.info.btns?.includes('delete')"
|
||||
@tap="onDelete(state.info.id)"
|
||||
>删除</button
|
||||
> -->
|
||||
<button class="ss-reset-button contcat-btn btn" @tap="sheep.$router.go('/pages/chat/index')"
|
||||
>联系客服</button
|
||||
>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const state = reactive({
|
||||
active: 0,
|
||||
aftersaleId: 0,
|
||||
info: {},
|
||||
list: [
|
||||
{
|
||||
title: '提交申请',
|
||||
},
|
||||
{
|
||||
title: '处理中',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function onApply(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消此申请吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.order.aftersale.cancel(orderId);
|
||||
if (error === 0) {
|
||||
getDetail(state.aftersaleId);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function onDelete(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.order.aftersale.delete(orderId);
|
||||
if (error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
const onCopy = () => {
|
||||
sheep.$helper.copyText(state.info.aftersale_sn);
|
||||
};
|
||||
async function getDetail(id) {
|
||||
const { error, data } = await sheep.$api.order.aftersale.detail(id);
|
||||
if (error === 0) {
|
||||
state.info = data;
|
||||
if (state.info.aftersale_status === -2 || state.info.aftersale_status === -1) {
|
||||
state.list.push({ title: state.info.aftersale_status_text });
|
||||
state.active = 2;
|
||||
} else {
|
||||
state.list.push({ title: '完成' });
|
||||
state.active = state.info.aftersale_status;
|
||||
}
|
||||
} else {
|
||||
state.info = null;
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.aftersaleId = options.id;
|
||||
getDetail(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 步骤条
|
||||
.steps-box {
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/order/order_bg.png')") no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
padding-left: 72rpx;
|
||||
|
||||
.steps-item {
|
||||
.sicon-circleclose {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.sicon-circlecheck {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.steps-item-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
margin-top: 16rpx;
|
||||
margin-left: -36rpx;
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.activity-color {
|
||||
color: #fff;
|
||||
}
|
||||
.info-color {
|
||||
color: rgba(#fff, 0.4);
|
||||
}
|
||||
.activity-bg {
|
||||
background: #fff;
|
||||
}
|
||||
.info-bg {
|
||||
background: rgba(#fff, 0.4);
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 270rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
|
||||
// 服务状态
|
||||
.status-box {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0px 0px;
|
||||
padding: 20rpx;
|
||||
margin-top: -20rpx;
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-time {
|
||||
font-size: 24rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 退款金额
|
||||
.aftersale-money {
|
||||
background-color: #fff;
|
||||
height: 98rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.aftersale-money--title {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.aftersale-money--num {
|
||||
font-size: 28rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
|
||||
// order-shop
|
||||
.order-shop {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
// 服务内容
|
||||
.aftersale-content {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin: 0 20rpx;
|
||||
|
||||
.aftersale-item {
|
||||
height: 60rpx;
|
||||
|
||||
.copy-btn {
|
||||
background: #eeeeee;
|
||||
color: #333;
|
||||
border-radius: 20rpx;
|
||||
width: 75rpx;
|
||||
height: 40rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部功能
|
||||
.foot_box {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
width: 160rpx;
|
||||
line-height: 60rpx;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
margin-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,236 @@
|
||||
<!-- 售后列表 -->
|
||||
<template>
|
||||
<s-layout title="售后列表">
|
||||
<!-- tab -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据">
|
||||
</s-empty>
|
||||
<!-- 列表 -->
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="list-box ss-m-y-20"
|
||||
v-for="order in state.pagination.data"
|
||||
:key="order.id"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })"
|
||||
>
|
||||
<view class="order-head ss-flex ss-col-center ss-row-between">
|
||||
<text class="no">服务单号：{{ order.aftersale_sn }}</text>
|
||||
<text class="state">{{ order.aftersale_status_text }}</text>
|
||||
</view>
|
||||
<s-goods-item
|
||||
:img="order.goods_image"
|
||||
:title="order.goods_title"
|
||||
:skuText="order.goods_sku_text"
|
||||
:price="order.goods_price"
|
||||
:num="order.goods_num"
|
||||
></s-goods-item>
|
||||
<view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="title ss-m-r-20">{{ order.type_text }}</view>
|
||||
<view class="value">{{ order.aftersale_status_desc }}</view>
|
||||
</view>
|
||||
<text class="_icon-forward"></text>
|
||||
</view>
|
||||
<view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
|
||||
<view>
|
||||
<button
|
||||
class="ss-reset-button tool-btn"
|
||||
@tap.stop="onApply(order.id)"
|
||||
v-if="order.btns.includes('cancel')"
|
||||
>取消申请</button
|
||||
>
|
||||
</view>
|
||||
<view>
|
||||
<button
|
||||
class="ss-reset-button tool-btn"
|
||||
@tap.stop="onDelete(order.id)"
|
||||
v-if="order.btns.includes('delete')"
|
||||
>删除</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
showApply: false,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '申请中',
|
||||
value: 'nooper',
|
||||
},
|
||||
{
|
||||
name: '处理中',
|
||||
value: 'ing',
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
value: 'completed',
|
||||
},
|
||||
{
|
||||
name: '已拒绝',
|
||||
value: 'refuse',
|
||||
},
|
||||
];
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.currentTab = e.index;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 获取售后列表
|
||||
async function getOrderList(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.order.aftersale.list({
|
||||
type: tabMaps[state.currentTab].value,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onApply(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消此申请吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.order.aftersale.cancel(orderId);
|
||||
if (error === 0) {
|
||||
getOrderList();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function onDelete(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.order.aftersale.delete(orderId);
|
||||
if (error === 0) {
|
||||
getOrderList();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.type) {
|
||||
state.currentTab = options.type;
|
||||
}
|
||||
getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getOrderList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-box {
|
||||
background-color: #fff;
|
||||
|
||||
.order-head {
|
||||
padding: 0 25rpx;
|
||||
height: 77rpx;
|
||||
}
|
||||
|
||||
.apply-box {
|
||||
height: 82rpx;
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 22rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-btn-box {
|
||||
height: 100rpx;
|
||||
|
||||
.tool-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #f6f6f6;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!-- 售后进度 -->
|
||||
<template>
|
||||
<s-layout title="售后进度">
|
||||
<view class="log-box">
|
||||
<view class="log-content-box ss-flex" v-for="(item, index) in state.info" :key="item.title">
|
||||
<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
|
||||
<text class="cicon-title" :class="index === 0 ? 'activity-color' : ''"></text>
|
||||
<view v-if="state.info.length - 1 != index" class="line"></view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">{{ item.log_type_text }}</view>
|
||||
<su-parse class="richtext" :content="item.content"></su-parse>
|
||||
<view class="" v-if="item.images?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||
<view class="ss-flex">
|
||||
<view v-for="i in item.images" :key="i" class="ss-m-r-20"
|
||||
><image class="content-img" :src="sheep.$url.static(i)" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="date">{{ item.create_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
active: 1,
|
||||
list: [
|
||||
{
|
||||
title: '买家下单',
|
||||
desc: '2018-11-11',
|
||||
},
|
||||
{
|
||||
title: '卖家发货',
|
||||
desc: '2018-11-12',
|
||||
},
|
||||
{
|
||||
title: '买家签收',
|
||||
desc: '2018-11-13',
|
||||
},
|
||||
{
|
||||
title: '交易完成',
|
||||
desc: '2018-11-14',
|
||||
},
|
||||
],
|
||||
});
|
||||
async function getDetail(id) {
|
||||
const { data } = await sheep.$api.order.aftersale.detail(id);
|
||||
state.info = data.logs;
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.aftersaleId = options.id;
|
||||
getDetail(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.log-box {
|
||||
padding: 24rpx 24rpx 24rpx 40rpx;
|
||||
background-color: #fff;
|
||||
.log-content-box {
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
.cicon-title {
|
||||
font-size: 30rpx;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
.activity-color {
|
||||
color: #60bd45;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #dfdfdf;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.richtext {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
.content-img {
|
||||
margin-top: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.date {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<s-layout title="确认订单">
|
||||
<view class="bg-white address-box ss-m-b-14 ss-r-b-20" @tap="onSelectAddress">
|
||||
<s-address-item :item="state.addressInfo" :hasBorderBottom="false">
|
||||
<view class="ss-rest-button"><text class="_icon-forward"></text></view>
|
||||
</s-address-item>
|
||||
</view>
|
||||
<view class="bg-white order-card-box ss-m-b-14">
|
||||
<s-goods-item
|
||||
v-for="item in state.orderInfo.goods_list"
|
||||
:key="item.goods_id"
|
||||
:img="item.current_sku_price.image || item.goods.image"
|
||||
:title="item.goods.title"
|
||||
:skuText="item.current_sku_price?.goods_sku_text"
|
||||
:price="item.current_sku_price.price"
|
||||
:num="item.goods_num"
|
||||
></s-goods-item>
|
||||
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="item-title">配送方式</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value">物流快递</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="item-title">订单备注</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput
|
||||
maxlength="20"
|
||||
placeholder="建议留言前先与商家沟通"
|
||||
v-model="state.orderPayload.remark"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 合计 -->
|
||||
<view class="bg-white total-card-box ss-p-20 ss-m-b-14">
|
||||
<view class="total-box-content border-bottom">
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">商品金额</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value ss-m-r-24">￥{{ state.orderInfo.goods_amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderPayload.order_type === 'score'"
|
||||
>
|
||||
<view class="item-title">扣除积分</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">运费</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value ss-m-r-24">+￥{{ state.orderInfo.dispatch_amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderPayload.order_type != 'score'"
|
||||
>
|
||||
<!-- <view v-if="state.orderInfo.coupon_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> -->
|
||||
<view class="item-title">优惠券</view>
|
||||
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
|
||||
<text class="item-value text-red" v-if="state.orderPayload.coupon_id != 0"
|
||||
>-￥{{ state.orderInfo.coupon_discount_fee }}</text
|
||||
>
|
||||
<text class="item-value text-red" v-else
|
||||
>{{ state.couponInfo.can_use?.length }}张可用</text
|
||||
>
|
||||
|
||||
<text class="_icon-forward item-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.promo_infos?.length"
|
||||
>
|
||||
<!-- <view v-if="state.orderInfo.promo_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> -->
|
||||
<view class="item-title">活动优惠</view>
|
||||
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
|
||||
<text class="item-value text-red"> -￥{{ state.orderInfo.promo_discount_fee }} </text>
|
||||
<text class="_icon-forward item-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
|
||||
<view class="total-num ss-m-r-20">共{{ state.totalNumber }}件</view>
|
||||
<view>合计：</view>
|
||||
<view class="total-num text-red"> ￥{{ state.orderInfo.pay_fee }} </view>
|
||||
<view class="ss-flex" v-if="state.orderPayload.order_type === 'score'">
|
||||
<view class="total-num ss-font-30 text-red ss-m-l-4"> + </view>
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 发票 -->
|
||||
<view class="bg-white ss-p-20 ss-r-20">
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">发票申请</view>
|
||||
<view class="ss-flex ss-col-center" @tap="onSelectInvoice">
|
||||
<text class="item-value">{{ state.invoiceInfo.name || '无需开具发票' }}</text>
|
||||
<text class="_icon-forward item-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选择优惠券弹框 -->
|
||||
<s-coupon-select
|
||||
v-model="state.couponInfo"
|
||||
:show="state.showCoupon"
|
||||
@confirm="onSelectCoupon"
|
||||
@close="state.showCoupon = false"
|
||||
/>
|
||||
<!-- 满额折扣弹框 -->
|
||||
<s-discount-list
|
||||
v-model="state.orderInfo"
|
||||
:show="state.showDiscount"
|
||||
@close="state.showDiscount = false"
|
||||
/>
|
||||
<!-- 底部 -->
|
||||
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
|
||||
<view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
|
||||
<view class="total-box-footer ss-flex ss-col-center">
|
||||
<view class="total-num ss-font-30 text-red"> ￥{{ state.orderInfo.pay_fee }} </view>
|
||||
<view v-if="state.orderPayload.order_type === 'score'" class="ss-flex">
|
||||
<view class="total-num ss-font-30 text-red ss-m-l-4">+</view>
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
{{ exchangeNow ? '立即兑换' : '提交订单' }}
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
orderPayload: {},
|
||||
orderInfo: {},
|
||||
addressInfo: {},
|
||||
invoiceInfo: {},
|
||||
totalNumber: 0,
|
||||
showCoupon: false,
|
||||
couponInfo: [],
|
||||
showDiscount: false,
|
||||
});
|
||||
|
||||
// 立即兑换(立即兑换无需跳转收银台)
|
||||
const exchangeNow = computed(
|
||||
() => state.orderPayload.order_type === 'score' && state.orderInfo.pay_fee == 0,
|
||||
);
|
||||
|
||||
// 选择地址
|
||||
function onSelectAddress() {
|
||||
uni.$once('SELECT_ADDRESS', (e) => {
|
||||
changeConsignee(e.addressInfo);
|
||||
});
|
||||
sheep.$router.go('/pages/user/address/list');
|
||||
}
|
||||
|
||||
// 更改收货人地址&计算订单信息
|
||||
async function changeConsignee(addressInfo = {}) {
|
||||
if (isEmpty(addressInfo)) {
|
||||
const { error, data } = await sheep.$api.user.address.default();
|
||||
if (error === 0 && !isEmpty(data)) {
|
||||
addressInfo = data;
|
||||
}
|
||||
}
|
||||
if (!isEmpty(addressInfo)) {
|
||||
state.addressInfo = addressInfo;
|
||||
state.orderPayload.address_id = state.addressInfo.id;
|
||||
}
|
||||
getOrderInfo();
|
||||
}
|
||||
|
||||
// 选择优惠券
|
||||
async function onSelectCoupon(e) {
|
||||
state.orderPayload.coupon_id = e || 0;
|
||||
getOrderInfo();
|
||||
state.showCoupon = false;
|
||||
}
|
||||
|
||||
// 选择发票信息
|
||||
function onSelectInvoice() {
|
||||
uni.$once('SELECT_INVOICE', (e) => {
|
||||
state.invoiceInfo = e.invoiceInfo;
|
||||
state.orderPayload.invoice_id = e.invoiceInfo.id || 0;
|
||||
});
|
||||
sheep.$router.go('/pages/user/invoice/list');
|
||||
}
|
||||
|
||||
// 提交订单/立即兑换
|
||||
function onConfirm() {
|
||||
if (!state.orderPayload.address_id) {
|
||||
sheep.$helper.toast('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
|
||||
if (exchangeNow.value) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定使用积分立即兑换?',
|
||||
cancelText: '再想想',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
submitOrder();
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
submitOrder();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建订单&跳转
|
||||
async function submitOrder() {
|
||||
const { error, data } = await sheep.$api.order.create(state.orderPayload);
|
||||
if (error === 0) {
|
||||
// 更新购物车列表
|
||||
if (state.orderPayload.from === 'cart') {
|
||||
sheep.$store('cart').getList();
|
||||
}
|
||||
if (exchangeNow.value) {
|
||||
sheep.$router.redirect('/pages/pay/result', {
|
||||
orderSN: data.order_sn,
|
||||
});
|
||||
} else {
|
||||
sheep.$router.redirect('/pages/pay/index', {
|
||||
orderSN: data.order_sn,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 检查库存&计算订单价格
|
||||
async function getOrderInfo() {
|
||||
let { error, data } = await sheep.$api.order.calc(state.orderPayload);
|
||||
if (error === 0) {
|
||||
state.totalNumber = 0;
|
||||
state.orderInfo = data;
|
||||
state.orderInfo.goods_list.forEach((item) => {
|
||||
state.totalNumber += item.goods_num;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 获取可用优惠券
|
||||
async function getCoupons() {
|
||||
const { error, data } = await sheep.$api.order.coupons(state.orderPayload);
|
||||
if (error === 0) {
|
||||
state.couponInfo = data;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.data) {
|
||||
state.orderPayload = JSON.parse(options.data);
|
||||
changeConsignee();
|
||||
if (state.orderPayload.order_type !== 'score') {
|
||||
getCoupons();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-input-wrapper {
|
||||
width: 320rpx;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx;
|
||||
height: 72rpx;
|
||||
text-align: right !important;
|
||||
padding-right: 0 !important;
|
||||
|
||||
.uni-input-input {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
.uni-easyinput__content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: right !important;
|
||||
}
|
||||
}
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
.order-item {
|
||||
height: 80rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.remark-input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item-placeholder {
|
||||
color: $dark-9;
|
||||
font-size: 26rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.total-box-footer {
|
||||
height: 90rpx;
|
||||
|
||||
.total-num {
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
height: 100rpx;
|
||||
|
||||
.submit-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.goto-pay-text {
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: #e5e5e5;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.cicon-checkbox {
|
||||
font-size: 36rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
.cicon-box {
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,541 @@
|
||||
<!-- 订单详情 -->
|
||||
<template>
|
||||
<s-layout title="订单详情" class="index-wrap" navbar="inner">
|
||||
<!-- 订单状态 -->
|
||||
<view
|
||||
class="state-box ss-flex-col ss-col-center ss-row-right"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="ss-flex ss-m-t-32 ss-m-b-20">
|
||||
<image
|
||||
v-if="
|
||||
state.orderInfo.status_code == 'unpaid' ||
|
||||
state.orderInfo.status_code == 'nosend' ||
|
||||
state.orderInfo.status_code == 'nocomment'
|
||||
"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
|
||||
>
|
||||
</image>
|
||||
<image
|
||||
v-if="
|
||||
state.orderInfo.status_code == 'completed' ||
|
||||
state.orderInfo.status_code == 'refund_agree'
|
||||
"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_success.png')"
|
||||
>
|
||||
</image>
|
||||
<image
|
||||
v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_close.png')"
|
||||
>
|
||||
</image>
|
||||
<image
|
||||
v-if="state.orderInfo.status_code == 'noget'"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_express.png')"
|
||||
>
|
||||
</image>
|
||||
<view class="ss-font-30">{{ state.orderInfo.status_text }}</view>
|
||||
</view>
|
||||
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{ state.orderInfo.status_desc }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<view class="order-address-box">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="address-username">
|
||||
{{ state.orderInfo.address?.consignee }}
|
||||
</text>
|
||||
<text class="address-phone">{{ state.orderInfo.address?.mobile }}</text>
|
||||
</view>
|
||||
<view class="address-detail">{{ addressText }}</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-goods">
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
|
||||
<view class="order-card">
|
||||
<s-goods-item
|
||||
@tap="onGoodsDetail(item.goods_id)"
|
||||
:img="item.goods_image"
|
||||
:title="item.goods_title"
|
||||
:skuText="item.goods_sku_text"
|
||||
:price="item.goods_price"
|
||||
:score="state.orderInfo.score_amount"
|
||||
:num="item.goods_num"
|
||||
>
|
||||
<template #priceSuffix>
|
||||
<button class="ss-reset-button tag-btn" v-if="item.status_text">
|
||||
{{ item.status_text }}
|
||||
</button>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单信息 -->
|
||||
<view class="notice-box">
|
||||
<view class="notice-box__content">
|
||||
<view class="notice-item--center">
|
||||
<view class="ss-flex ss-flex-1">
|
||||
<text class="title">订单编号：</text>
|
||||
<text class="detail">{{ state.orderInfo.order_sn }}</text>
|
||||
</view>
|
||||
<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
<text class="title">下单时间：</text>
|
||||
<text class="detail">{{ state.orderInfo.create_time }}</text>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
<text class="title">支付时间：</text>
|
||||
<text class="detail">{{ state.orderInfo.paid_time || '-' }}</text>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
<text class="title">支付方式：</text>
|
||||
<text class="detail">{{ state.orderInfo.pay_types_text?.join(',') || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 价格信息 -->
|
||||
<view class="order-price-box">
|
||||
<view class="notice-item ss-flex ss-row-between">
|
||||
<text class="title">商品总额</text>
|
||||
<view class="ss-flex">
|
||||
<text class="detail" v-if="Number(state.orderInfo.goods_amount) > 0"
|
||||
>￥{{ state.orderInfo.goods_amount }}</text
|
||||
>
|
||||
<view
|
||||
v-if="state.orderInfo.score_amount && Number(state.orderInfo.goods_amount) > 0"
|
||||
class="detail"
|
||||
>+</view
|
||||
>
|
||||
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<view class="detail">{{ state.orderInfo.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-item ss-flex ss-row-between">
|
||||
<text class="title">运费</text>
|
||||
<text class="detail">￥{{ state.orderInfo.dispatch_amount }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="notice-item ss-flex ss-row-between"
|
||||
v-if="state.orderInfo.promo_discount_fee > 0"
|
||||
>
|
||||
<text class="title">优惠金额</text>
|
||||
<text class="detail">¥{{ state.orderInfo.promo_discount_fee }}</text>
|
||||
</view>
|
||||
<view class="notice-item all-rpice-item ss-flex ss-m-t-20">
|
||||
<text class="title">已付款</text>
|
||||
<text class="detail all-price" v-if="Number(state.orderInfo.pay_fee) > 0"
|
||||
>￥{{ state.orderInfo.pay_fee }}</text
|
||||
>
|
||||
<view
|
||||
v-if="state.orderInfo.score_amount && Number(state.orderInfo.pay_fee) > 0"
|
||||
class="detail all-price"
|
||||
>+</view
|
||||
>
|
||||
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<view class="detail all-price">{{ state.orderInfo.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-item all-rpice-item ss-flex ss-m-t-20" v-if="refundFee > 0">
|
||||
<text class="title">已退款</text>
|
||||
<text class="detail all-price">￥{{ refundFee.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
|
||||
<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.btns?.length">
|
||||
<view class="footer-box ss-flex ss-col-center ss-row-right">
|
||||
<button
|
||||
class="ss-reset-button cancel-btn"
|
||||
v-if="state.orderInfo.btns?.includes('cancel')"
|
||||
@tap="onCancel(state.orderInfo.id)"
|
||||
>取消订单</button
|
||||
>
|
||||
<button
|
||||
class="ss-reset-button pay-btn ui-BG-Main-Gradient"
|
||||
v-if="state.orderInfo.btns?.includes('pay')"
|
||||
@tap="onPay(state.orderInfo.order_sn)"
|
||||
>继续支付</button
|
||||
>
|
||||
<button
|
||||
class="ss-reset-button cancel-btn"
|
||||
v-if="state.orderInfo.btns?.includes('apply_refund')"
|
||||
@tap="onRefund(state.orderInfo.id)"
|
||||
>申请退款</button
|
||||
>
|
||||
<button
|
||||
class="ss-reset-button cancel-btn"
|
||||
v-if="state.orderInfo.btns?.includes('groupon')"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/activity/groupon/detail', {
|
||||
id: state.orderInfo.ext.groupon_id,
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ state.orderInfo.status_code === 'groupon_invalid' ? '拼团详情' : '邀请拼团' }}
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button cancel-btn"
|
||||
v-if="state.orderInfo.btns?.includes('express')"
|
||||
@tap="onExpress(state.orderInfo.id)"
|
||||
>查看物流</button
|
||||
>
|
||||
<button
|
||||
class="ss-reset-button cancel-btn"
|
||||
v-if="state.orderInfo.btns?.includes('confirm')"
|
||||
@tap="onConfirm(state.orderInfo.id)"
|
||||
>确认收货</button
|
||||
>
|
||||
<button
|
||||
class="ss-reset-button cancel-btn"
|
||||
v-if="state.orderInfo.btns?.includes('comment')"
|
||||
@tap="onComment(state.orderInfo.order_sn)"
|
||||
>评价晒单</button
|
||||
>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const state = reactive({
|
||||
orderInfo: {},
|
||||
});
|
||||
|
||||
const addressText = computed(() => {
|
||||
let data = state.orderInfo.address;
|
||||
if (data) {
|
||||
return `${data.province_name} ${data.city_name} ${data.district_name} ${data.address}`;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 复制
|
||||
const onCopy = () => {
|
||||
sheep.$helper.copyText(state.orderInfo.order_sn);
|
||||
};
|
||||
//退款总额
|
||||
const refundFee = computed(() => {
|
||||
let refundFee = 0;
|
||||
state.orderInfo.items?.forEach((i) => {
|
||||
refundFee += Number(i.refund_fee);
|
||||
});
|
||||
return refundFee;
|
||||
});
|
||||
// 去支付
|
||||
function onPay(orderSN) {
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
function onGoodsDetail(id) {
|
||||
sheep.$router.go('/pages/goods/index', { id });
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
async function onCancel(orderId) {
|
||||
const { error, data } = await sheep.$api.order.cancel(orderId);
|
||||
if (error === 0) {
|
||||
getOrderDetail(data.order_sn);
|
||||
}
|
||||
}
|
||||
|
||||
// 申请退款
|
||||
async function onRefund(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要申请退款吗?',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error, data } = await sheep.$api.order.applyRefund(orderId);
|
||||
if (error === 0) {
|
||||
getOrderDetail(data.order_sn);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 查看物流
|
||||
async function onExpress(orderId) {
|
||||
sheep.$router.go('/pages/order/express/list', {
|
||||
orderId,
|
||||
});
|
||||
}
|
||||
|
||||
// 确认收货
|
||||
async function onConfirm(orderId) {
|
||||
const { error, data } = await sheep.$api.order.confirm(orderId);
|
||||
if (error === 0) {
|
||||
getOrderDetail(data.order_sn);
|
||||
}
|
||||
}
|
||||
|
||||
// 评价
|
||||
function onComment(orderSN) {
|
||||
uni.$once('SELECT_INVOICE', (e) => {
|
||||
state.invoiceInfo = e.invoiceInfo;
|
||||
});
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
async function getOrderDetail(id) {
|
||||
const { data, error } = await sheep.$api.order.detail(id);
|
||||
if (error === 0) {
|
||||
state.orderInfo = data;
|
||||
} else {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = '';
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
getOrderDetail(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
.state-box {
|
||||
color: rgba(#fff, 0.9);
|
||||
width: 100%;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/order/order_bg.png')") no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
box-sizing: border-box;
|
||||
.state-img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-address-box {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin: -50rpx 20rpx 16rpx 20rpx;
|
||||
padding: 44rpx 34rpx 42rpx 20rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
|
||||
.address-username {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-goods {
|
||||
border-radius: 10rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
|
||||
.order-list {
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.order-card {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.order-sku {
|
||||
font-size: 24rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
width: 450rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.order-num {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.tag-btn {
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
height: 36rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
border: 2rpx solid var(--ui-BG-Main);
|
||||
border-radius: 14rpx;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单信息。
|
||||
.notice-box {
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
|
||||
.notice-box__head {
|
||||
font-size: 30rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 80rpx;
|
||||
border-bottom: 1rpx solid #dfdfdf;
|
||||
padding: 0 25rpx;
|
||||
}
|
||||
|
||||
.notice-box__content {
|
||||
padding: 20rpx;
|
||||
|
||||
.self-pickup-box {
|
||||
width: 100%;
|
||||
|
||||
.self-pickup--img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-item,
|
||||
.notice-item--center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
width: 100rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
padding: 0;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单价格信息
|
||||
.order-price-box {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
|
||||
.notice-item {
|
||||
line-height: 70rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.all-rpice-item {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.all-price {
|
||||
font-size: 26rpx;
|
||||
font-family: OPPOSANS;
|
||||
line-height: normal;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部
|
||||
.footer-box {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.cancel-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #eeeeee;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!-- 物流包裹-->
|
||||
<template>
|
||||
<s-layout title="物流包裹">
|
||||
<view class="express-wrap">
|
||||
<su-sticky bgColor="#FFE2B6">
|
||||
<view class="header ss-flex ss-p-l-24">{{ state.list.length }}个包裹已派送</view>
|
||||
</su-sticky>
|
||||
<view
|
||||
class="express-box"
|
||||
v-for="item in state.list"
|
||||
:key="item.type"
|
||||
@tap="sheep.$router.go('/pages/order/express/log', { id: item.id, orderId: state.orderId })"
|
||||
>
|
||||
<view class="express-box-header ss-flex ss-row-between">
|
||||
<view class="express-box-header-type">{{ item.status_text }}</view>
|
||||
<view class="express-box-header-num">{{
|
||||
item.express_name + ' : ' + item.express_no
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="express-box-content">
|
||||
<view class="content-address">{{ item.logs[0]?.content }}</view>
|
||||
<view class="" v-if="item.items?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||
<view class="ss-flex">
|
||||
<view v-for="i in item.items" :key="i" class="ss-m-r-20"
|
||||
><image class="content-img" :src="sheep.$url.static(i.goods_image)" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="express-box-foot">共{{ item.items.length }}件商品</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
const state = reactive({
|
||||
list: [],
|
||||
orderId: '',
|
||||
});
|
||||
async function getExpressList(id) {
|
||||
const { data } = await sheep.$api.order.express(id, '');
|
||||
state.list = data;
|
||||
}
|
||||
onLoad((Option) => {
|
||||
state.orderId = Option.orderId;
|
||||
getExpressList(state.orderId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
height: 84rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #a8700d;
|
||||
}
|
||||
.express-box {
|
||||
background: #fff;
|
||||
padding-bottom: 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
.express-box-header {
|
||||
height: 76rpx;
|
||||
padding: 0 24rpx;
|
||||
border-bottom: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
.express-box-header-type {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
.express-box-header-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.express-box-content {
|
||||
padding: 20rpx 24rpx;
|
||||
.content-address {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.content-img {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
.express-box-foot {
|
||||
padding: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!-- 物流追踪 -->
|
||||
<template>
|
||||
<s-layout title="物流追踪">
|
||||
<view class="log-wrap">
|
||||
<view class="log-card ss-flex" v-if="goodsImages.length > 0">
|
||||
<uni-swiper-dot :info="goodsImages" :current="state.current" mode="round">
|
||||
<swiper class="swiper-box" @change="change">
|
||||
<swiper-item v-for="(item, index) in goodsImages" :key="index">
|
||||
<image class="log-card-img" :src="sheep.$url.static(item.image)"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<view class="log-card-msg">
|
||||
<view class="ss-flex ss-m-b-8">
|
||||
<view>物流状态：</view>
|
||||
<view class="warning-color">{{ state.info.status_text }}</view>
|
||||
</view>
|
||||
<view class="ss-m-b-8">快递单号：{{ state.info.express_no }}</view>
|
||||
<view>快递公司：{{ state.info.express_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="log-content">
|
||||
<view
|
||||
class="log-content-box ss-flex"
|
||||
v-for="(item, index) in state.info.logs"
|
||||
:key="item.title"
|
||||
>
|
||||
<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
|
||||
<text
|
||||
v-if="state.info.logs[index].status === state.info.logs[index - 1]?.status"
|
||||
class="cicon-title"
|
||||
></text>
|
||||
<text
|
||||
v-if="state.info.logs[index].status != state.info.logs[index - 1]?.status"
|
||||
:class="[
|
||||
index === 0 ? 'activity-color' : 'info-color',
|
||||
item.status === 'transport'
|
||||
? 'sicon-transport'
|
||||
: item.status === 'delivery'
|
||||
? 'sicon-delivery'
|
||||
: item.status === 'collect'
|
||||
? 'sicon-a-collectmaterials'
|
||||
: item.status === 'fail' || item.status === 'back' || item.status === 'refuse'
|
||||
? 'sicon-circleclose'
|
||||
: item.status === 'signfor'
|
||||
? 'sicon-circlecheck'
|
||||
: 'sicon-warning-outline',
|
||||
]"
|
||||
></text>
|
||||
<view v-if="state.info.logs.length - 1 != index" class="line"></view>
|
||||
</view>
|
||||
<view class="log-content-msg">
|
||||
<view
|
||||
v-if="
|
||||
item.status_text &&
|
||||
state.info.logs[index].status != state.info.logs[index - 1]?.status
|
||||
"
|
||||
class="log-msg-title ss-m-b-20"
|
||||
>{{ item.status_text }}</view
|
||||
>
|
||||
<view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>
|
||||
<view class="log-msg-date ss-m-b-40">{{ item.change_date }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
info: [],
|
||||
current: 0,
|
||||
});
|
||||
const goodsImages = computed(() => {
|
||||
let array = [];
|
||||
if (state.info.items) {
|
||||
state.info.items.forEach((item) => {
|
||||
array.push({
|
||||
image: item.goods_image,
|
||||
});
|
||||
});
|
||||
}
|
||||
return array;
|
||||
});
|
||||
function change(e) {
|
||||
state.current = e.detail.current;
|
||||
}
|
||||
async function getExpressdetail(id, orderId) {
|
||||
const { data } = await sheep.$api.order.express(id, orderId);
|
||||
state.info = data;
|
||||
}
|
||||
onLoad((Option) => {
|
||||
getExpressdetail(Option.id, Option.orderId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-box {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.log-card {
|
||||
border-top: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
.log-card-img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.log-card-msg {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
width: 490rpx;
|
||||
color: #333333;
|
||||
.warning-color {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.log-content {
|
||||
padding: 34rpx 20rpx 0rpx 20rpx;
|
||||
background: #fff;
|
||||
.log-content-box {
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
.cicon-title {
|
||||
color: #ccc;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.activity-color {
|
||||
color: #f0c785;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.info-color {
|
||||
color: #ccc;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
|
||||
.log-content-msg {
|
||||
.log-msg-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.log-msg-desc {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.log-msg-date {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,328 @@
|
||||
<!-- 订单详情 -->
|
||||
<template>
|
||||
<s-layout title="发票详情" class="invoice-wrap" navbar="inner">
|
||||
<view
|
||||
class="invoice-heard ss-flex-col ss-row-right ss-col-center"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="ss-flex ss-m-t-32 ss-m-b-32">
|
||||
<text
|
||||
class="sicon-warning-line"
|
||||
v-if="state.data.status === 'waiting' || state.data.status === 'unpaid'"
|
||||
></text>
|
||||
<text class="sicon-check-line" v-if="state.data.status === 'finish'"></text>
|
||||
<view class="invoice-heard-title">{{ state.data.status_text }}</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-m-b-52">
|
||||
<view class="ss-m-r-20 invoice-heard-desc">预计可开发票金额：</view>
|
||||
<view class="invoice-heard-price">￥{{ state.data.amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-content ss-flex-col ss-col-center">
|
||||
<view class="ss-m-t-50 ss-m-b-42 invoice-content-title">增值税电子普通发票</view>
|
||||
<view class="ss-flex ss-m-b-64">
|
||||
<view v-for="(item, index) in state.info" :key="item.title">
|
||||
<view class="log-icon ss-flex">
|
||||
<text class="sicon-circlecheck" v-if="statusNum >= index"></text>
|
||||
<text class="sicon-unchecked" v-else></text>
|
||||
<view
|
||||
v-if="state.info.length - 1 != index"
|
||||
class="line"
|
||||
:class="statusNum >= index ? 'activity-color' : ''"
|
||||
></view>
|
||||
</view>
|
||||
<view class="log-title">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-content-list ss-flex ss-row-between ss-col-top">
|
||||
<view class="">
|
||||
<view class="ss-flex">
|
||||
<view class="list-title">发票类型</view>
|
||||
<view class="list-desc">{{ state.data.type_text }}</view>
|
||||
</view>
|
||||
<view class="ss-flex">
|
||||
<view class="list-title">发票抬头</view>
|
||||
<view class="list-desc">{{ state.data.name }}</view>
|
||||
</view>
|
||||
<view class="ss-flex" v-if="state.data.type === 'company'">
|
||||
<view class="list-title">发票税号</view>
|
||||
<view class="list-desc">{{ state.data.tax_no }}</view>
|
||||
</view>
|
||||
<view class="ss-flex">
|
||||
<view class="list-title">开票金额</view>
|
||||
<view class="list-desc">￥{{ state.data.amount }}</view>
|
||||
</view>
|
||||
<view class="ss-flex" v-if="state.data.status === 'finish'">
|
||||
<view class="list-title">开票时间</view>
|
||||
<view class="list-desc">{{ state.data.finish_time }}</view>
|
||||
</view>
|
||||
<view class="ss-flex">
|
||||
<view class="list-title">申请时间</view>
|
||||
<view class="list-desc">{{ state.data.create_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="invoice-content-img ss-flex-col ss-col-center"
|
||||
v-if="state.data.status === 'finish'"
|
||||
>
|
||||
<su-image
|
||||
class="invoice-img"
|
||||
isPreview
|
||||
:previewList="state.jointImage"
|
||||
:current="0"
|
||||
:src="sheep.$url.static('/static/img/shop/order/invoice_thumb.png')"
|
||||
:height="110"
|
||||
mode="scaleToFill"
|
||||
v-if="state.jointImage[0].substr(-4) != '.pdf'"
|
||||
></su-image>
|
||||
<!-- TODO: 发票为多个pdf时 -->
|
||||
<view v-if="state.jointImage[0].substr(-4) == '.pdf'" @tap="onInvoice">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/order/invoice_thumb.png')"
|
||||
class="invoice-img"
|
||||
></image>
|
||||
</view>
|
||||
<view class="invoice-img-num">共{{ state.numImage }}张</view>
|
||||
<view class="invoice-img-title">点击预览发票</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-order ss-m-t-20">
|
||||
<view class="goods-box" v-for="item in state.data.order_items" :key="item.id">
|
||||
<s-goods-item
|
||||
:img="item.goods_image"
|
||||
:title="item.goods_title"
|
||||
:skuText="item.goods_sku_text"
|
||||
:price="item.goods_price"
|
||||
:num="item.goods_num"
|
||||
/>
|
||||
</view>
|
||||
<view class="invoice-order-list">
|
||||
<view class="ss-flex">
|
||||
<view class="list-title">订单状态</view>
|
||||
<view class="list-desc">{{ state.data.order?.status_text }}</view>
|
||||
</view>
|
||||
<view class="ss-flex">
|
||||
<view class="list-title">订单编号</view>
|
||||
<view class="list-desc">{{ state.data.order?.order_sn }}</view>
|
||||
</view>
|
||||
<view class="ss-flex">
|
||||
<view class="list-title">下单时间</view>
|
||||
<view class="list-desc">{{ state.data.order?.create_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const state = reactive({
|
||||
info: [
|
||||
{
|
||||
title: '订单提交',
|
||||
},
|
||||
{
|
||||
title: '等待开票',
|
||||
},
|
||||
{
|
||||
title: '开票完成',
|
||||
},
|
||||
],
|
||||
data: {},
|
||||
jointImage: [],
|
||||
numImage: 0,
|
||||
});
|
||||
const statusNum = computed(() => {
|
||||
if (state.data.status === 'finish') {
|
||||
return 2;
|
||||
} else if (state.data.status === 'waiting') {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
function onInvoice() {
|
||||
// #ifdef H5
|
||||
window.open(state.jointImage);
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
uni.downloadFile({
|
||||
url: state.jointImage[0],
|
||||
success: function (res) {
|
||||
var filePath = res.tempFilePath;
|
||||
uni.openDocument({
|
||||
filePath: filePath,
|
||||
showMenu: true,
|
||||
success: function (res) {
|
||||
console.log('打开文档成功');
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
async function getInvoiceDetail(id) {
|
||||
const { data } = await sheep.$api.order.invoice(id);
|
||||
state.data = data;
|
||||
state.data.download_urls?.forEach((i, index) => {
|
||||
state.numImage = index + 1;
|
||||
if (i.substr(-4) != '.pdf') {
|
||||
state.jointImage.push(sheep.$url.static(i));
|
||||
} else {
|
||||
state.jointImage.push(sheep.$url.static(i));
|
||||
}
|
||||
});
|
||||
}
|
||||
onLoad((options) => {
|
||||
getInvoiceDetail(options.invoiceId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.invoice-heard {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/order/invoice_bg.png')") no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
.sicon-warning-line {
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.sicon-check-line {
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.invoice-heard-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-left: 8rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
.invoice-heard-desc {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.invoice-heard-price {
|
||||
font-size: 28rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.invoice-content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
margin-top: -16rpx;
|
||||
.invoice-content-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.log-icon {
|
||||
.sicon-unchecked {
|
||||
color: #c2bec2;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.sicon-circlecheck {
|
||||
color: #e60a00;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.line {
|
||||
width: 158rpx;
|
||||
height: 6rpx;
|
||||
background: #f2f2f2;
|
||||
border: 2rpx solid #ffffff;
|
||||
}
|
||||
.activity-color {
|
||||
background: #e60a00;
|
||||
}
|
||||
}
|
||||
.log-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-left: -26rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.invoice-content-list {
|
||||
width: 100%;
|
||||
padding: 0 46rpx 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.list-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin-right: 44rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
.list-desc {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
.invoice-img {
|
||||
width: 200rpx;
|
||||
height: 110rpx;
|
||||
}
|
||||
.invoice-img-num {
|
||||
width: 216rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(#000000, 0.45);
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-top: -30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.invoice-img-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.invoice-order {
|
||||
width: 100%;
|
||||
padding-top: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.goods-box {
|
||||
border-bottom: 2rpx solid #dfdfdf;
|
||||
}
|
||||
.invoice-order-list {
|
||||
padding: 40rpx 24rpx 0 24rpx;
|
||||
.list-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin-right: 44rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
.list-desc {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,585 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="我的订单">
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/order-empty.png"
|
||||
text="暂无订单"
|
||||
></s-empty>
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
|
||||
v-for="order in state.pagination.data"
|
||||
:key="order.id"
|
||||
@tap="onOrderDetail(order.order_sn)"
|
||||
>
|
||||
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="order-no">订单号：{{ order.order_sn }}</view>
|
||||
<view class="order-state ss-font-26" :class="formatOrderColor(order.status_code)">{{
|
||||
order.status_text
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="border-bottom" v-for="item in order.items" :key="item.id">
|
||||
<s-goods-item
|
||||
:img="item.goods_image"
|
||||
:title="item.goods_title"
|
||||
:skuText="item.goods_sku_text"
|
||||
:price="item.goods_price"
|
||||
:score="order.score_amount"
|
||||
:num="item.goods_num"
|
||||
>
|
||||
<template #tool>
|
||||
<view class="ss-flex">
|
||||
<button
|
||||
class="ss-reset-button apply-btn"
|
||||
v-if="item.btns.includes('aftersale')"
|
||||
@tap.stop="
|
||||
sheep.$router.go('/pages/order/aftersale/apply', {
|
||||
item: JSON.stringify(item),
|
||||
})
|
||||
"
|
||||
>
|
||||
申请售后
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button apply-btn"
|
||||
v-if="item.btns.includes('re_aftersale')"
|
||||
@tap.stop="
|
||||
sheep.$router.go('/pages/order/aftersale/apply', {
|
||||
item: JSON.stringify(item),
|
||||
})
|
||||
"
|
||||
>
|
||||
重新售后
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="ss-reset-button apply-btn"
|
||||
v-if="item.btns.includes('aftersale_info')"
|
||||
@tap.stop="
|
||||
sheep.$router.go('/pages/order/aftersale/detail', {
|
||||
id: item.ext.aftersale_id,
|
||||
})
|
||||
"
|
||||
>
|
||||
售后详情
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button apply-btn"
|
||||
v-if="item.btns.includes('buy_again')"
|
||||
@tap.stop="
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
id: item.goods_id,
|
||||
})
|
||||
"
|
||||
>
|
||||
再次购买
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
|
||||
<view v-if="order.total_discount_fee > 0" class="ss-flex ss-col-center ss-m-r-8">
|
||||
<view class="discounts-title">优惠:￥</view>
|
||||
<view class="discounts-money">{{ order.total_discount_fee }}</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-col-center ss-m-r-8">
|
||||
<view class="discounts-title">运费:￥</view>
|
||||
<view class="discounts-money">{{ order.dispatch_amount }}</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="discounts-title pay-color">总金额:</view>
|
||||
<view class="discounts-money pay-color" v-if="Number(order.order_amount) > 0"
|
||||
>￥{{ order.order_amount }}</view
|
||||
>
|
||||
<view v-if="order.score_amount && Number(order.order_amount) > 0">+</view>
|
||||
<view class="price-text ss-flex ss-col-center" v-if="order.score_amount">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<view>{{ order.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-card-footer ss-flex ss-col-center ss-p-x-20"
|
||||
:class="order.btns.length > 3 ? 'ss-row-between' : 'ss-row-right'"
|
||||
>
|
||||
<!-- <su-popover>
|
||||
<button class="more-btn ss-reset-button" @click.stop>更多</button>
|
||||
<template #content>
|
||||
<view class="more-item-box">
|
||||
<view class="more-item ss-flex ss-col-center ss-reset-button">
|
||||
<view class="item-title">删除订单</view>
|
||||
</view>
|
||||
<view class="more-item ss-flex ss-col-center ss-reset-button">
|
||||
<view class="item-title">查看发票</view>
|
||||
</view>
|
||||
<view class="more-item ss-flex ss-col-center ss-reset-button">
|
||||
<view class="item-title">评价晒单</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</su-popover> -->
|
||||
<view class="ss-flex ss-col-center">
|
||||
<button
|
||||
v-if="order.btns.includes('groupon')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderGroupon(order)"
|
||||
>
|
||||
{{ order.status_code === 'groupon_invalid' ? '拼团详情' : '邀请拼团' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="order.btns.includes('invoice')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderInvoice(order.invoice?.id)"
|
||||
>
|
||||
查看发票
|
||||
</button>
|
||||
<button
|
||||
v-if="order.btns.length === 0"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderDetail(order.order_sn)"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="order.btns.includes('confirm')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onConfirm(order.id)"
|
||||
>
|
||||
确认收货
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="order.btns.includes('express')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onExpress(order.id)"
|
||||
>
|
||||
查看物流
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="order.btns.includes('apply_refund')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onRefund(order.id)"
|
||||
>
|
||||
申请退款
|
||||
</button>
|
||||
<button
|
||||
v-if="order.btns.includes('re_apply_refund')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onRefund(order.id)"
|
||||
>
|
||||
重新退款
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="order.btns.includes('cancel')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onCancel(order.id)"
|
||||
>
|
||||
取消订单
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="order.btns.includes('comment')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onComment(order.order_sn)"
|
||||
>
|
||||
评价晒单
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="order.btns.includes('delete')"
|
||||
class="delete-btn ss-reset-button"
|
||||
@tap.stop="onDelete(order.id)"
|
||||
>
|
||||
删除订单
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="order.btns.includes('pay')"
|
||||
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
|
||||
@tap.stop="onPay(order.order_sn)"
|
||||
>
|
||||
继续支付
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import { formatOrderColor } from '@/sheep/hooks/useGoods';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
|
||||
// 数据
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
deleteOrderId: 0,
|
||||
error: 0,
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '待付款',
|
||||
value: 'unpaid',
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
value: 'nosend',
|
||||
},
|
||||
{
|
||||
name: '待收货',
|
||||
value: 'noget',
|
||||
},
|
||||
{
|
||||
name: '待评价',
|
||||
value: 'nocomment',
|
||||
},
|
||||
];
|
||||
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
if (state.currentTab === e.index) return;
|
||||
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
|
||||
state.currentTab = e.index;
|
||||
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 订单详情
|
||||
function onOrderDetail(orderSN) {
|
||||
sheep.$router.go('/pages/order/detail', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 分享拼团
|
||||
function onOrderGroupon(order) {
|
||||
sheep.$router.go('/pages/activity/groupon/detail', {
|
||||
id: order.ext.groupon_id,
|
||||
});
|
||||
}
|
||||
|
||||
// 查看发票
|
||||
function onOrderInvoice(invoiceId) {
|
||||
sheep.$router.go('/pages/order/invoice', {
|
||||
invoiceId,
|
||||
});
|
||||
}
|
||||
|
||||
// 继续支付
|
||||
function onPay(orderSN) {
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 评价
|
||||
function onComment(orderSN) {
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 确认收货
|
||||
async function onConfirm(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请确认包裹全部到达后再确认收货',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error, data } = await sheep.$api.order.confirm(orderId);
|
||||
if (error === 0) {
|
||||
let index = state.pagination.data.findIndex((order) => order.id === orderId);
|
||||
state.pagination.data[index] = data;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 查看物流
|
||||
async function onExpress(orderId) {
|
||||
sheep.$router.go('/pages/order/express/list', {
|
||||
orderId,
|
||||
});
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
async function onCancel(orderId) {
|
||||
const { error, data } = await sheep.$api.order.cancel(orderId);
|
||||
if (error === 0) {
|
||||
let index = state.pagination.data.findIndex((order) => order.id === orderId);
|
||||
state.pagination.data[index] = data;
|
||||
}
|
||||
}
|
||||
|
||||
// 删除订单
|
||||
function onDelete(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除订单吗?',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error, data } = await sheep.$api.order.delete(orderId);
|
||||
if (error === 0) {
|
||||
let index = state.pagination.data.findIndex((order) => order.id === orderId);
|
||||
state.pagination.data.splice(index, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 申请退款
|
||||
async function onRefund(orderId, confirm = false) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要申请退款吗?',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
// #ifdef MP
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage('order_apply_refund');
|
||||
// #endif
|
||||
const { error, data } = await sheep.$api.order.applyRefund(orderId);
|
||||
if (error === 0) {
|
||||
let index = state.pagination.data.findIndex((order) => order.id === orderId);
|
||||
state.pagination.data[index] = data;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
async function getOrderList(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.order.list({
|
||||
type: tabMaps[state.currentTab].value,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
state.error = res.error;
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.type) {
|
||||
state.currentTab = options.type;
|
||||
}
|
||||
getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getOrderList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
|
||||
//下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
getOrderList();
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
.tool-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #f6f6f6;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.delete-btn {
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
color: #ff3000;
|
||||
background: #fee;
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: normal;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
width: 140rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid #dcdcdc;
|
||||
line-height: normal;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
flex: 1;
|
||||
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list-card-box {
|
||||
.order-card-header {
|
||||
height: 80rpx;
|
||||
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-state {
|
||||
}
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.discounts-money {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: #999;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.pay-color {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card-footer {
|
||||
height: 100rpx;
|
||||
|
||||
.more-item-box {
|
||||
padding: 20rpx;
|
||||
|
||||
.more-item {
|
||||
height: 60rpx;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
color: $dark-9;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 154rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.uni-tooltip-popup) {
|
||||
background: var(--ui-BG);
|
||||
}
|
||||
.warning-color {
|
||||
color: #faad14;
|
||||
}
|
||||
.danger-color {
|
||||
color: #ff3000;
|
||||
}
|
||||
.success-color {
|
||||
color: #52c41a;
|
||||
}
|
||||
.info-color {
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<su-popup :show="show" class="add-bank-wrap" @close="hideModal">
|
||||
<view class="ss-modal-box bg-white ss-flex-col">
|
||||
<view class="modal-header ss-flex-col ss-col-left">
|
||||
<text v-if="props.modelValue.type === 'bank'" class="modal-title ss-m-b-20">
|
||||
绑定银行卡
|
||||
</text>
|
||||
<text v-if="props.modelValue.type === 'wechat'" class="modal-title ss-m-b-20">
|
||||
绑定微信
|
||||
</text>
|
||||
<text v-if="props.modelValue.type === 'alipay'" class="modal-title ss-m-b-20">
|
||||
绑定支付宝
|
||||
</text>
|
||||
</view>
|
||||
<view class="modal-content ss-flex-1 ss-p-b-100">
|
||||
<block v-if="props.modelValue.type === 'bank'">
|
||||
<uni-forms
|
||||
ref="form"
|
||||
:model="state.bank.model"
|
||||
:rules="state.bank.rules"
|
||||
validateTrigger="bind"
|
||||
labelWidth="160"
|
||||
labelAlign="center"
|
||||
border
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<uni-forms-item name="account_name" label="持卡人">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
placeholder="请输入持卡人"
|
||||
v-model="state.bank.model.account_name"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="account_header" label="开户行">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
placeholder="请输入开户行"
|
||||
v-model="state.bank.model.account_header"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="account_no" label="银行卡号">
|
||||
<uni-easyinput
|
||||
type="number"
|
||||
:inputBorder="false"
|
||||
placeholder="请输入银行卡号"
|
||||
v-model="state.bank.model.account_no"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</block>
|
||||
|
||||
<block v-if="props.modelValue.type === 'wechat'">
|
||||
<uni-forms
|
||||
ref="form"
|
||||
:model="state.wechat.model"
|
||||
:rules="state.wechat.rules"
|
||||
validateTrigger="bind"
|
||||
labelWidth="160"
|
||||
labelAlign="center"
|
||||
border
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<uni-forms-item name="account_name" label="真实姓名">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
placeholder="请输入您的真实姓名"
|
||||
v-model="state.wechat.model.account_name"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</block>
|
||||
|
||||
<block v-if="props.modelValue.type === 'alipay'">
|
||||
<uni-forms
|
||||
ref="form"
|
||||
:model="state.alipay.model"
|
||||
:rules="state.alipay.rules"
|
||||
validateTrigger="bind"
|
||||
labelWidth="160"
|
||||
labelAlign="center"
|
||||
border
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<uni-forms-item name="account_name" label="真实姓名">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
placeholder="请输入您的真实姓名"
|
||||
v-model="state.alipay.model.account_name"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="account_no" label="支付宝">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
placeholder="请输入支付宝 邮箱/手机号"
|
||||
v-model="state.alipay.model.account_no"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</block>
|
||||
</view>
|
||||
<view class="modal-footer ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button save-btn" @tap="onSave">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, watchPostEffect, watch } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { realName, bankName, bankCode, alipayAccount } from '@/sheep/validate/form';
|
||||
|
||||
const form = ref(null);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue, oldValue) => {
|
||||
setModelValue(newValue);
|
||||
},
|
||||
);
|
||||
|
||||
function setModelValue(modelValue) {
|
||||
Object.keys(state[modelValue.type].model).forEach((key) => {
|
||||
state[modelValue.type].model[key] = modelValue[key];
|
||||
});
|
||||
}
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'close']);
|
||||
// 数据
|
||||
const state = reactive({
|
||||
bank: {
|
||||
model: {
|
||||
account_name: '',
|
||||
account_header: '',
|
||||
account_no: '',
|
||||
},
|
||||
rules: {
|
||||
account_name: realName,
|
||||
account_header: bankName,
|
||||
account_no: bankCode,
|
||||
},
|
||||
},
|
||||
alipay: {
|
||||
model: {
|
||||
account_name: '',
|
||||
account_no: '',
|
||||
},
|
||||
rules: {
|
||||
account_name: realName,
|
||||
account_no: alipayAccount,
|
||||
},
|
||||
},
|
||||
wechat: {
|
||||
model: {
|
||||
account_name: '',
|
||||
},
|
||||
rules: {
|
||||
account_name: realName,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
setModelValue(props.modelValue);
|
||||
|
||||
const hideModal = () => {
|
||||
emits('close');
|
||||
};
|
||||
const onSave = async () => {
|
||||
const validate = await unref(form)
|
||||
.validate()
|
||||
.catch((error) => {
|
||||
'error: ', error;
|
||||
});
|
||||
if (!validate) return;
|
||||
let data = {
|
||||
type: props.modelValue.type,
|
||||
account_header: state[props.modelValue.type].model.account_header,
|
||||
account_name: state[props.modelValue.type].model.account_name,
|
||||
account_no: state[props.modelValue.type].model.account_no,
|
||||
};
|
||||
let res = await sheep.$api.user.account.save(data);
|
||||
if (res.error === 0) {
|
||||
emits('update:modelValue', res.data);
|
||||
hideModal();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-modal-box {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
max-height: 1000rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
font-size: 46rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 120rpx;
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<su-popup :show="show" class="ss-checkout-counter-wrap" @close="hideModal">
|
||||
<view class="ss-modal-box bg-white ss-flex-col">
|
||||
<view class="modal-header ss-flex-col ss-col-left">
|
||||
<text class="modal-title ss-m-b-20">选择提现方式</text>
|
||||
</view>
|
||||
<view class="modal-content ss-flex-1 ss-p-b-100">
|
||||
<view
|
||||
class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center"
|
||||
v-for="(item, index) in typeList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="container-icon ss-flex ss-m-r-20">
|
||||
<image :src="sheep.$url.static(item.icon)" />
|
||||
</view>
|
||||
<view class="ss-flex-1">{{ item.title }}</view>
|
||||
<view class="radio">
|
||||
<radio-group @change="onChange">
|
||||
<label class="radio">
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
:checked="item.value === state.currentValue"
|
||||
:disabled="!methods.includes(item.value)"
|
||||
/>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button save-btn" @tap="onConfirm">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onBeforeMount, nextTick } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
methods: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'change', 'close']);
|
||||
const state = reactive({
|
||||
currentValue: '',
|
||||
});
|
||||
const typeList = [
|
||||
{
|
||||
icon: '/static/img/shop/pay/wx_type.png',
|
||||
title: '微信零钱',
|
||||
value: 'wechat',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/ali_type.png',
|
||||
title: '支付宝账户',
|
||||
value: 'alipay',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/bank_type.png',
|
||||
title: '银行卡转账',
|
||||
value: 'bank',
|
||||
},
|
||||
];
|
||||
const getWalletAccountInfo = async () => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let res = await sheep.$api.user.account.info({
|
||||
type: state.currentValue,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (!props.methods.includes(res.data.type)) {
|
||||
return;
|
||||
}
|
||||
state.currentValue = res.data.type;
|
||||
emits('update:modelValue', {
|
||||
type: res.data.type,
|
||||
account_header: res.data.account_header,
|
||||
account_name: res.data.account_name,
|
||||
account_no: res.data.account_no,
|
||||
});
|
||||
} else {
|
||||
emits('update:modelValue', {
|
||||
type: state.currentValue,
|
||||
});
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
|
||||
function onChange(e) {
|
||||
state.currentValue = e.detail.value;
|
||||
}
|
||||
|
||||
const onConfirm = async () => {
|
||||
if (state.currentValue === '') {
|
||||
sheep.$helper.toast('请选择提现方式');
|
||||
return;
|
||||
}
|
||||
await getWalletAccountInfo();
|
||||
emits('close');
|
||||
};
|
||||
|
||||
const hideModal = () => {
|
||||
emits('close');
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await getWalletAccountInfo();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-modal-box {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
max-height: 1000rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
font-size: 46rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
|
||||
.container-list {
|
||||
height: 96rpx;
|
||||
border-bottom: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
.container-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 120rpx;
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.uni-radio-input) {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<ui-modal
|
||||
class="add-bank-wrap"
|
||||
name="walletAddAlipay"
|
||||
mask="40"
|
||||
align="bottom"
|
||||
ui="ss-r-t-30"
|
||||
:showCancel="false"
|
||||
:option="false"
|
||||
>
|
||||
<view class="ss-modal-box bg-white ss-flex-col">
|
||||
<view class="modal-header ss-flex-col ss-col-left">
|
||||
<text class="cicon-close-round close-icon" @tap="hideModal"></text>
|
||||
<text class="modal-title ss-m-b-20">添加支付宝</text>
|
||||
</view>
|
||||
<view class="modal-content ss-flex-1 ss-p-b-100">
|
||||
<ui-form
|
||||
ref="addAlipayFormRef"
|
||||
:model="state.model"
|
||||
:rules="state.rules"
|
||||
hasClear
|
||||
labelPosition="left"
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<ui-form-item prop="real_name" title="真实姓名">
|
||||
<ui-input placeholder="请输入真实姓名" v-model="state.model.real_name"></ui-input>
|
||||
</ui-form-item>
|
||||
|
||||
<ui-form-item prop="card_no" title="支付宝账号">
|
||||
<ui-input placeholder="请输入支付宝账号" v-model="state.model.card_no"></ui-input>
|
||||
</ui-form-item>
|
||||
</ui-form>
|
||||
</view>
|
||||
<view class="modal-footer ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button save-btn" @tap="onSave">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</ui-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref } from 'vue';
|
||||
import { realName, bankCode } from '@/sheep/common/validate/form';
|
||||
|
||||
// 数据
|
||||
const addAlipayFormRef = ref(null);
|
||||
const state = reactive({
|
||||
model: {
|
||||
real_name: '',
|
||||
card_no: '',
|
||||
},
|
||||
rules: {
|
||||
real_name: realName,
|
||||
card_no: bankCode,
|
||||
},
|
||||
});
|
||||
|
||||
const showModal = () => {
|
||||
hooksModal.showModal('walletAddAlipay');
|
||||
};
|
||||
const hideModal = () => {
|
||||
hooksModal.hideModal();
|
||||
};
|
||||
const onSave = async () => {
|
||||
const res = await unref(addAlipayFormRef).validate();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
showModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-modal-box {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
max-height: 1000rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
font-size: 46rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 120rpx;
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!-- 提现方式 -->
|
||||
<template>
|
||||
<ui-modal
|
||||
class="ss-checkout-counter-wrap"
|
||||
name="walletTransfterBalance"
|
||||
mask="40"
|
||||
align="bottom"
|
||||
ui="ss-r-t-30"
|
||||
:showCancel="false"
|
||||
:option="false"
|
||||
>
|
||||
<view class="ss-modal-box bg-white ss-flex-col">
|
||||
<view class="modal-header ss-flex-col ss-col-left">
|
||||
<text class="cicon-close-round close-icon" @tap="hideModal"></text>
|
||||
<text class="modal-title ss-m-b-20">转余额</text>
|
||||
<text class="modal-subtitle">将您的佣金转到钱包中继续消费</text>
|
||||
</view>
|
||||
<view class="modal-content ss-flex-1">
|
||||
<view class="input-box ss-flex ss-col-center border-bottom">
|
||||
<view calss="unit">￥</view>
|
||||
<ui-input class="ss-flex-1 ss-p-l-10" type="number" placeholder="请输入金额" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button save-btn" @tap="hideModal">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</ui-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 转余额弹窗
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-modal-box {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
max-height: 1000rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $gray-d;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
font-size: 46rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
padding: 40rpx;
|
||||
|
||||
.input-box {
|
||||
width: 624rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 120rpx;
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,290 @@
|
||||
<!-- 收银台 -->
|
||||
<template>
|
||||
<s-layout title="收银台">
|
||||
<view class="bg-white ss-modal-box ss-flex-col">
|
||||
<view class="modal-header ss-flex-col ss-col-center ss-row-center">
|
||||
<text class="modal-title ss-m-b-30">收银台</text>
|
||||
<view class="money-box ss-m-b-20">
|
||||
<text class="money-text">{{ state.orderInfo.pay_fee }}</text>
|
||||
</view>
|
||||
<view class="time-text">
|
||||
<text>{{ payDescText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-content ss-flex-1">
|
||||
<view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
|
||||
<view class="pay-type-item border-bottom" v-for="item in payMethods" :key="item.title">
|
||||
<view
|
||||
class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30"
|
||||
v-if="
|
||||
allowedPayment.includes(item.value) &&
|
||||
!(state.orderType === 'recharge' && item.value === 'money')
|
||||
"
|
||||
@tap="state.payment = item.value"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image class="pay-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit"></image>
|
||||
<text class="pay-title">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="check-box ss-flex ss-col-center ss-p-l-10">
|
||||
<view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'">
|
||||
余额: {{ userInfo.money }}元
|
||||
</view>
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
:checked="state.payment === item.value"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 工具 -->
|
||||
<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80">
|
||||
<button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
|
||||
检测支付环境中
|
||||
</button>
|
||||
<button v-else-if="state.payStatus === -1" class="ss-reset-button past-due-btn" disabled>
|
||||
支付已过期
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="ss-reset-button save-btn"
|
||||
@tap="onPay"
|
||||
:disabled="state.payStatus !== 1"
|
||||
:class="{ 'disabled-btn': state.payStatus !== 1 }"
|
||||
>
|
||||
立即支付
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
// 检测支付环境
|
||||
//
|
||||
const state = reactive({
|
||||
orderType: 'goods',
|
||||
payment: '',
|
||||
orderInfo: {},
|
||||
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
|
||||
});
|
||||
const allowedPayment = computed(() => sheep.$store('app').platform.payment);
|
||||
const payMethods = [
|
||||
{
|
||||
icon: '/static/img/shop/wechat_pay.png',
|
||||
title: '微信支付',
|
||||
value: 'wechat',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/ali_pay.png',
|
||||
title: '支付宝支付',
|
||||
value: 'alipay',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/wallet_pay.png',
|
||||
title: '余额支付',
|
||||
value: 'money',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/apple_pay.png',
|
||||
title: 'Apple Pay',
|
||||
value: 'apple',
|
||||
},
|
||||
];
|
||||
|
||||
const onPay = () => {
|
||||
if (state.payment === '') {
|
||||
sheep.$helper.toast('请选择支付方式');
|
||||
return;
|
||||
}
|
||||
if (state.payment === 'money') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要支付吗?',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
|
||||
}
|
||||
};
|
||||
|
||||
const payDescText = computed(() => {
|
||||
if (state.payStatus === 2) {
|
||||
return '该订单已支付';
|
||||
}
|
||||
if (state.payStatus === 1 && state.orderInfo.ext.expired_time !== 0) {
|
||||
const time = useDurationTime(state.orderInfo.ext.expired_time);
|
||||
if (time.ms <= 0) {
|
||||
state.payStatus = -1;
|
||||
return '';
|
||||
}
|
||||
return `剩余支付时间 ${time.h}:${time.m}:${time.s} `;
|
||||
}
|
||||
if (state.payStatus === -2) {
|
||||
return '未查询到支付单信息';
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
|
||||
function checkPayStatus() {
|
||||
if (state.orderInfo.status === 'unpaid') {
|
||||
state.payStatus = 1;
|
||||
return;
|
||||
}
|
||||
if (state.orderInfo.status === 'closed') {
|
||||
state.payStatus = -1;
|
||||
return;
|
||||
}
|
||||
state.payStatus = 2;
|
||||
}
|
||||
|
||||
async function setRechargeOrder(id) {
|
||||
const { data, error } = await sheep.$api.trade.order(id);
|
||||
if (error === 0) {
|
||||
state.orderInfo = data;
|
||||
checkPayStatus();
|
||||
} else {
|
||||
state.payStatus = -2;
|
||||
}
|
||||
}
|
||||
async function setGoodsOrder(id) {
|
||||
const { data, error } = await sheep.$api.order.detail(id);
|
||||
if (error === 0) {
|
||||
state.orderInfo = data;
|
||||
checkPayStatus();
|
||||
} else {
|
||||
state.payStatus = -2;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (
|
||||
sheep.$platform.name === 'WechatOfficialAccount' &&
|
||||
sheep.$platform.os === 'ios' &&
|
||||
!sheep.$platform.landingPage.includes('pages/pay/index')
|
||||
) {
|
||||
location.reload();
|
||||
return;
|
||||
}
|
||||
let id = '';
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
if (options.type === 'recharge') {
|
||||
state.orderType = 'recharge';
|
||||
// 充值订单
|
||||
setRechargeOrder(id);
|
||||
} else {
|
||||
// 商品订单
|
||||
setGoodsOrder(id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pay-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
|
||||
.ss-modal-box {
|
||||
max-height: 1000rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 60rpx 20rpx 40rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.money-text {
|
||||
color: $red;
|
||||
font-size: 46rpx;
|
||||
font-weight: bold;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 26rpx;
|
||||
color: $gray-b;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
font-size: 46rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
|
||||
.pay-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.pay-tip {
|
||||
font-size: 26rpx;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
height: 86rpx;
|
||||
}
|
||||
|
||||
.userInfo-money {
|
||||
font-size: 26rpx;
|
||||
color: #bbbbbb;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
.disabled-btn {
|
||||
background: #e5e5e5;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.past-due-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #999;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<s-layout class="widthdraw-log-wrap" title="充值记录">
|
||||
<!-- 记录卡片 -->
|
||||
<view class="wallet-log-box ss-p-b-30">
|
||||
<view class="log-list" v-for="item in state.pagination.data" :key="item">
|
||||
<view class="head ss-flex ss-col-center ss-row-between">
|
||||
<view class="title">充值金额</view>
|
||||
<view
|
||||
class="num"
|
||||
:class="
|
||||
item.status === -1
|
||||
? 'danger-color'
|
||||
: item.status === 2
|
||||
? 'success-color'
|
||||
: 'warning-color'
|
||||
"
|
||||
>{{ item.pay_fee }}元</view
|
||||
>
|
||||
</view>
|
||||
<view class="status-box item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">支付状态</view>
|
||||
<view
|
||||
class="status-text"
|
||||
:class="
|
||||
item.status === -1
|
||||
? 'danger-color'
|
||||
: item.status === 2
|
||||
? 'success-color'
|
||||
: 'warning-color'
|
||||
"
|
||||
>{{ item.status_text }}</view
|
||||
>
|
||||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">充值渠道</text>
|
||||
<view class="time ss-ellipsis-1">{{ item.platform_text }}</view>
|
||||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">充值单号</text>
|
||||
<view class="time"> {{ item.order_sn }} </view>
|
||||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">充值时间</text>
|
||||
<view class="time"> {{ item.paid_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/comment-empty.png"
|
||||
text="暂无充值记录"
|
||||
></s-empty>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
async function getLogList(page = 1, list_rows = 5) {
|
||||
const res = await sheep.$api.trade.orderLog({ type: 'recharge', list_rows, page });
|
||||
if (res.error === 0) {
|
||||
let logList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: logList,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getLogList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
getLogList();
|
||||
});
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 记录卡片
|
||||
.log-list {
|
||||
min-height: 213rpx;
|
||||
background: $white;
|
||||
margin-bottom: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.head {
|
||||
padding: 0 35rpx;
|
||||
height: 80rpx;
|
||||
border-bottom: 1rpx solid $gray-e;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-3;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 30rpx 10rpx;
|
||||
|
||||
.item-icon {
|
||||
color: $gray-d;
|
||||
font-size: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
width: 180rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warning-color {
|
||||
color: #faad14;
|
||||
}
|
||||
.danger-color {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
.success-color {
|
||||
color: #67c23a;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<s-layout title="充值" class="withdraw-wrap" navbar="inner">
|
||||
<view
|
||||
class="wallet-num-box ss-flex ss-col-center ss-row-between"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="">
|
||||
<view class="num-title">当前余额（元）</view>
|
||||
<view class="wallet-num">{{ userInfo.money }}</view>
|
||||
</view>
|
||||
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/recharge-log')"
|
||||
>充值记录</button
|
||||
>
|
||||
</view>
|
||||
<view class="recharge-box">
|
||||
<view class="recharge-card-box" v-if="state.data.status">
|
||||
<view class="input-label ss-m-b-50">充值金额</view>
|
||||
<view class="input-box ss-flex border-bottom ss-p-b-20" v-if="state.data.custom_status">
|
||||
<view class="unit">￥</view>
|
||||
<uni-easyinput
|
||||
v-model="state.recharge_money"
|
||||
type="number"
|
||||
placeholder="请输入充值金额"
|
||||
:inputBorder="false"
|
||||
>
|
||||
</uni-easyinput>
|
||||
</view>
|
||||
<view class="face-value-box ss-flex ss-flex-wrap ss-m-y-40">
|
||||
<button
|
||||
class="ss-reset-button face-value-btn"
|
||||
v-for="item in state.faceValueList"
|
||||
:key="item.money"
|
||||
:class="[{ 'btn-active': state.recharge_money === item.money }]"
|
||||
@tap="onCard(item.money)"
|
||||
>
|
||||
<text class="face-value-title">{{ item.money }}</text>
|
||||
<view v-if="item.gift" class="face-value-tag">
|
||||
送{{ item.gift }}{{ state.data.gift_type == 'money' ? '元' : '积分' }}</view
|
||||
>
|
||||
</button>
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
确认充值
|
||||
</button>
|
||||
</view>
|
||||
<view class="" v-if="state.data.status === 0"> 关闭充值 </view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
|
||||
const state = reactive({
|
||||
recharge_money: '',
|
||||
data: {},
|
||||
faceValueList: [],
|
||||
});
|
||||
// 点击卡片
|
||||
|
||||
function onCard(e) {
|
||||
state.recharge_money = e;
|
||||
}
|
||||
async function getRechargeTabs() {
|
||||
const list = await sheep.$api.trade.rechargeRules();
|
||||
state.data = list;
|
||||
state.data.status = list.status;
|
||||
state.faceValueList = list.quick_amounts;
|
||||
}
|
||||
|
||||
function onChange(e) {
|
||||
state.data.gift_type = e.detail.value;
|
||||
}
|
||||
|
||||
async function onConfirm() {
|
||||
const { error, data } = await sheep.$api.trade.recharge({
|
||||
recharge_money: state.recharge_money,
|
||||
});
|
||||
if (error === 0) {
|
||||
sheep.$router.go('/pages/pay/index', { orderSN: data.order_sn, type: 'recharge' });
|
||||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
getRechargeTabs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-input-input {
|
||||
font-family: OPPOSANS !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-num-box {
|
||||
padding: 0 40rpx 80rpx;
|
||||
background: var(--ui-BG-Main) v-bind("sheep.$url.css('/static/img/shop/user/withdraw_bg.png')")
|
||||
center/750rpx 100% no-repeat;
|
||||
border-radius: 0 0 5% 5%;
|
||||
|
||||
.num-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.wallet-num {
|
||||
font-size: 60rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.log-btn {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 1rpx solid $white;
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.recharge-box {
|
||||
position: relative;
|
||||
padding: 0 30rpx;
|
||||
margin-top: -60rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 620rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.recharge-card-box {
|
||||
width: 690rpx;
|
||||
background: var(--ui-BG);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.input-label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.unit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 48rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.face-value-btn {
|
||||
width: 200rpx;
|
||||
height: 144rpx;
|
||||
border: 1px solid var(--ui-BG-Main);
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.face-value-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::after {
|
||||
content: '元';
|
||||
font-size: 24rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.face-value-tag {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 0.8;
|
||||
border-radius: 10rpx 0 20rpx 0;
|
||||
top: 0;
|
||||
left: -2rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 0.1;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-active {
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.face-value-title {
|
||||
color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.face-value-tag {
|
||||
background: $white;
|
||||
color: var(--ui-BG-Main);
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!-- 支付结果页面 -->
|
||||
<template>
|
||||
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
|
||||
<view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
|
||||
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'"> </view>
|
||||
<image
|
||||
class="pay-img ss-m-b-30"
|
||||
v-if="payResult === 'success'"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
|
||||
></image>
|
||||
<image
|
||||
class="pay-img ss-m-b-30"
|
||||
v-if="['failed', 'closed'].includes(payResult)"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
|
||||
></image>
|
||||
<view class="tip-text ss-m-b-30" v-if="payResult == 'success'">支付成功</view>
|
||||
<view class="tip-text ss-m-b-30" v-if="payResult == 'failed'">支付失败</view>
|
||||
<view class="tip-text ss-m-b-30" v-if="payResult == 'closed'">该订单已关闭</view>
|
||||
<view class="tip-text ss-m-b-30" v-if="payResult == 'waiting'">检测支付结果...</view>
|
||||
<view class="pay-total-num ss-flex" v-if="payResult === 'success'">
|
||||
<view v-if="Number(state.orderInfo.pay_fee) > 0">￥{{ state.orderInfo.pay_fee }}</view>
|
||||
<view v-if="state.orderInfo.score_amount && Number(state.orderInfo.pay_fee) > 0">+</view>
|
||||
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
></image>
|
||||
<view>{{ state.orderInfo.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box ss-flex ss-row-center ss-m-t-50">
|
||||
<button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')">
|
||||
返回首页
|
||||
</button>
|
||||
<button
|
||||
class="check-btn ss-reset-button"
|
||||
v-if="payResult === 'failed'"
|
||||
@tap="sheep.$router.redirect('/pages/pay/index', { orderSN: state.orderId })"
|
||||
>
|
||||
重新支付
|
||||
</button>
|
||||
<button
|
||||
class="check-btn ss-reset-button"
|
||||
v-if="payResult === 'success'"
|
||||
@tap="sheep.$router.redirect('/pages/order/list')"
|
||||
>
|
||||
查看订单
|
||||
</button>
|
||||
<button
|
||||
class="check-btn ss-reset-button"
|
||||
v-if="
|
||||
payResult === 'success' &&
|
||||
['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)
|
||||
"
|
||||
@tap="sheep.$router.redirect('/pages/activity/groupon/order')"
|
||||
>
|
||||
我的拼团
|
||||
</button>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<view class="subscribe-box ss-flex ss-m-t-44">
|
||||
<image
|
||||
class="subscribe-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/cargo.png')"
|
||||
></image>
|
||||
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
|
||||
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive, computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const state = reactive({
|
||||
orderId: 0,
|
||||
orderType: 'goods',
|
||||
result: 'unpaid', // 支付状态
|
||||
orderInfo: {}, // 订单详情
|
||||
counter: 0, // 获取结果次数
|
||||
});
|
||||
|
||||
const payResult = computed(() => {
|
||||
if (state.result === 'unpaid') {
|
||||
return 'waiting';
|
||||
}
|
||||
if (state.result === 'paid') {
|
||||
return 'success';
|
||||
}
|
||||
if (state.result === 'failed') {
|
||||
return 'failed';
|
||||
}
|
||||
|
||||
if (state.result === 'closed') {
|
||||
return 'closed';
|
||||
}
|
||||
});
|
||||
async function getOrderInfo(orderId) {
|
||||
let checkPayResult;
|
||||
state.counter++;
|
||||
if (state.orderType === 'recharge') {
|
||||
checkPayResult = sheep.$api.trade.order;
|
||||
} else {
|
||||
checkPayResult = sheep.$api.order.detail;
|
||||
}
|
||||
const { data, error } = await checkPayResult(orderId);
|
||||
if (error === 0) {
|
||||
state.orderInfo = data;
|
||||
if (state.orderInfo.status === 'closed') {
|
||||
state.result = 'closed';
|
||||
return;
|
||||
}
|
||||
if (state.orderInfo.status !== 'unpaid') {
|
||||
state.result = 'paid';
|
||||
// #ifdef MP
|
||||
subscribeMessage();
|
||||
// #endif
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (state.counter < 3 && state.result === 'unpaid') {
|
||||
setTimeout(() => {
|
||||
getOrderInfo(orderId);
|
||||
}, 1000);
|
||||
}
|
||||
// 超过三次检测才判断为支付失败
|
||||
if (state.counter >= 3) {
|
||||
state.result = 'failed';
|
||||
}
|
||||
}
|
||||
|
||||
// #ifdef MP
|
||||
function subscribeMessage() {
|
||||
let event = ['order_dispatched'];
|
||||
if (['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)) {
|
||||
event.push('groupon_finish');
|
||||
event.push('groupon_fail');
|
||||
}
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event);
|
||||
}
|
||||
// #endif
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = '';
|
||||
// 支付订单号
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.orderType === 'recharge') {
|
||||
state.orderType = 'recharge';
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
state.orderId = id;
|
||||
// 支付结果传值过来是失败，则直接显示失败界面
|
||||
if (options.payState === 'fail') {
|
||||
state.result = 'failed';
|
||||
} else {
|
||||
// 轮询三次检测订单支付结果
|
||||
getOrderInfo(id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.pay-result-box {
|
||||
padding: 60rpx 0;
|
||||
.pay-waiting {
|
||||
margin-top: 20rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 10rpx solid rgb(233, 231, 231);
|
||||
border-bottom-color: rgb(204, 204, 204);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
// -webkit-animation: rotation 1s linear infinite;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
.pay-img {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.pay-total-num {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
.back-btn {
|
||||
width: 190rpx;
|
||||
height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
border: 2rpx solid #dfdfdf;
|
||||
border-radius: 35rpx;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
}
|
||||
.check-btn {
|
||||
width: 190rpx;
|
||||
height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
border: 2rpx solid #dfdfdf;
|
||||
border-radius: 35rpx;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
}
|
||||
.subscribe-box {
|
||||
.subscribe-img {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
.subscribe-title {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 36rpx;
|
||||
color: #434343;
|
||||
}
|
||||
.subscribe-start {
|
||||
color: var(--ui-BG-Main);
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<s-layout class="widthdraw-log-wrap" title="提现记录">
|
||||
<!-- 记录卡片 -->
|
||||
<view class="wallet-log-box ss-p-b-30">
|
||||
<view class="log-list" v-for="item in state.pagination.data" :key="item">
|
||||
<view class="head ss-flex ss-col-center ss-row-between">
|
||||
<view class="title">{{
|
||||
item.withdraw_type === 'bank'
|
||||
? '提现至银行卡'
|
||||
: item.withdraw_type === 'alipay'
|
||||
? '提现至支付宝'
|
||||
: '提现至微信'
|
||||
}}</view>
|
||||
<view
|
||||
class="num"
|
||||
:class="
|
||||
item.status === -1
|
||||
? 'danger-color'
|
||||
: item.status === 2
|
||||
? 'success-color'
|
||||
: 'warning-color'
|
||||
"
|
||||
>{{ item.amount }}元</view
|
||||
>
|
||||
</view>
|
||||
<view class="status-box item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">申请状态</view>
|
||||
<view
|
||||
class="status-text"
|
||||
:class="
|
||||
item.status === -1
|
||||
? 'danger-color'
|
||||
: item.status === 2
|
||||
? 'success-color'
|
||||
: 'warning-color'
|
||||
"
|
||||
>{{ item.status_text }}</view
|
||||
>
|
||||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">账户信息</text>
|
||||
<view class="time ss-ellipsis-1" v-if="item.withdraw_type === 'bank'"
|
||||
>{{ item.withdraw_info_hidden.开户行 }}[{{ item.withdraw_info_hidden.银行卡号 }}]</view
|
||||
>
|
||||
<view class="time ss-ellipsis-1" v-if="item.withdraw_type === 'alipay'">
|
||||
支付宝[{{ item.withdraw_info_hidden.支付宝账户 }}]
|
||||
</view>
|
||||
<view class="time ss-ellipsis-1" v-if="item.withdraw_type === 'wechat'">微信零钱</view>
|
||||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">提现单号</text>
|
||||
<view class="time"> {{ item.withdraw_sn }} </view>
|
||||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">手续费</text>
|
||||
<view class="time">{{ item.charge_fee }}元</view>
|
||||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">申请时间</text>
|
||||
<view class="time"> {{ item.create_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/comment-empty.png"
|
||||
text="暂无提现记录"
|
||||
></s-empty>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
async function getList(page = 1, list_rows = 6) {
|
||||
const res = await sheep.$api.pay.withdraw.list({ list_rows, page });
|
||||
if (res.error === 0) {
|
||||
let logList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: logList,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
getList();
|
||||
});
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 记录卡片
|
||||
.log-list {
|
||||
min-height: 213rpx;
|
||||
background: $white;
|
||||
margin-bottom: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.head {
|
||||
padding: 0 35rpx;
|
||||
height: 80rpx;
|
||||
border-bottom: 1rpx solid $gray-e;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-3;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 30rpx 10rpx;
|
||||
|
||||
.item-icon {
|
||||
color: $gray-d;
|
||||
font-size: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
width: 180rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warning-color {
|
||||
color: #faad14;
|
||||
}
|
||||
.danger-color {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
.success-color {
|
||||
color: #67c23a;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<s-layout title="申请提现" class="withdraw-wrap" navbar="inner">
|
||||
<!-- <view class="page-bg"></view> -->
|
||||
<view
|
||||
class="wallet-num-box ss-flex ss-col-center ss-row-between"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="">
|
||||
<view class="num-title">可提现金额（元）</view>
|
||||
<view class="wallet-num">{{ userInfo.commission }}</view>
|
||||
</view>
|
||||
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/withdraw-log')"
|
||||
>提现记录</button
|
||||
>
|
||||
</view>
|
||||
<!-- 提现输入卡片-->
|
||||
<view class="draw-card">
|
||||
<view class="card-title">提现金额</view>
|
||||
<view class="input-box ss-flex ss-col-center border-bottom">
|
||||
<view class="unit">￥</view>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.amount"
|
||||
type="number"
|
||||
placeholder="请输入提现金额"
|
||||
/>
|
||||
</view>
|
||||
<view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30">
|
||||
<view class="name">提现至</view>
|
||||
<view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)">
|
||||
<view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view>
|
||||
<view v-if="state.accountInfo.type === 'wechat'" class="empty-text">微信零钱</view>
|
||||
<view v-if="state.accountInfo.type === 'alipay'" class="empty-text">支付宝账户</view>
|
||||
<view v-if="state.accountInfo.type === 'bank'" class="empty-text">银行卡转账</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bind-box ss-flex ss-col-center ss-row-between" v-if="state.accountInfo.type">
|
||||
<view class="placeholder-text" v-if="state.accountInfo.account_name">
|
||||
{{ state.accountInfo.account_header }}|{{ state.accountInfo.account_name }}
|
||||
</view>
|
||||
<view class="placeholder-text" v-else>暂无提现账户</view>
|
||||
<button class="add-btn ss-reset-button" @tap="onAccountEdit(true)">
|
||||
{{ state.accountInfo.account_name ? '修改' : '添加' }}
|
||||
</button>
|
||||
</view>
|
||||
<button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
|
||||
确认提现
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 提现说明 -->
|
||||
<view class="draw-notice">
|
||||
<view class="title ss-m-b-30">提现说明</view>
|
||||
<view class="draw-list" v-for="(rule, index) in state.rulesList" :key="index">
|
||||
{{ index + 1 }}.{{ rule }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择提现账户 -->
|
||||
<account-type-select
|
||||
:show="state.accountSelect"
|
||||
@close="onAccountSelect(false)"
|
||||
round="10"
|
||||
v-model="state.accountInfo"
|
||||
:methods="state.rules.methods"
|
||||
/>
|
||||
<!-- 编辑账户信息 -->
|
||||
<account-info-modal
|
||||
v-if="state.accountInfo.type"
|
||||
v-model="state.accountInfo"
|
||||
:show="state.accountEdit"
|
||||
@close="onAccountEdit(false)"
|
||||
round="10"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, onBeforeMount } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import accountTypeSelect from './components/account-type-select.vue';
|
||||
import accountInfoModal from './components/account-info-modal.vue';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
onPageScroll(() => {});
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
function filterRules(rules) {
|
||||
let list = [];
|
||||
let str1 = '';
|
||||
if (rules.min_amount > 0) {
|
||||
str1 += `最少 ${rules.min_amount}元; `;
|
||||
}
|
||||
if (rules.max_amount > 0) {
|
||||
str1 += `最多 ${rules.max_amount}元;`;
|
||||
}
|
||||
if (str1 !== '') {
|
||||
list.push('单次提现金额 ' + str1);
|
||||
}
|
||||
|
||||
if (rules.max_num > 0) {
|
||||
list.push(`每${rules.num_unit === 'day' ? '天' : '月'}最多可提现 ${rules.max_num} 次;`);
|
||||
}
|
||||
|
||||
if (rules.charge_rate_format > 0) {
|
||||
list.push(`每次收取提现手续费 ${rules.charge_rate_format}%;`);
|
||||
}
|
||||
list.push(
|
||||
`提现申请后将${rules.auto_arrival ? '自动' : '审核后'}到账, 到账结果请查收对应渠道服务通知;`,
|
||||
);
|
||||
list.push('如有疑问请及时联系客服.');
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
const userStore = sheep.$store('user');
|
||||
const userInfo = computed(() => userStore.userInfo);
|
||||
const state = reactive({
|
||||
amount: '',
|
||||
type: '',
|
||||
accountInfo: {},
|
||||
accountSelect: false,
|
||||
accountEdit: false,
|
||||
rules: {
|
||||
min_amount: 0,
|
||||
max_amount: 0,
|
||||
max_num: 0,
|
||||
num_unit: 0,
|
||||
charge_rate_format: 0,
|
||||
charge_rate: 0,
|
||||
methods: [],
|
||||
},
|
||||
rulesList: [],
|
||||
});
|
||||
|
||||
const onAccountEdit = (e) => {
|
||||
state.accountEdit = e;
|
||||
};
|
||||
|
||||
const onAccountSelect = (e) => {
|
||||
state.accountSelect = e;
|
||||
};
|
||||
|
||||
const onConfirm = async () => {
|
||||
let payload = {
|
||||
money: state.amount,
|
||||
...state.accountInfo,
|
||||
};
|
||||
|
||||
if (payload.money > userInfo.commission || payload.money <= 0) {
|
||||
sheep.$helper.toast('请输入正确的提现金额');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!payload.type) {
|
||||
sheep.$helper.toast('请选择提现方式');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!payload.account_name || !payload.account_header || !payload.account_no) {
|
||||
sheep.$helper.toast('请完善您的账户信息');
|
||||
return;
|
||||
}
|
||||
|
||||
if (sheep.$platform.name === 'H5' && payload.type === 'wechat') {
|
||||
sheep.$helper.toast('请使用微信浏览器操作');
|
||||
return;
|
||||
}
|
||||
|
||||
let { error, msg, data } = await sheep.$api.pay.withdraw.apply(payload);
|
||||
if (error === -1) {
|
||||
sheep.$platform.useProvider('wechat').bind();
|
||||
}
|
||||
if (error === 0) {
|
||||
userStore.getInfo();
|
||||
uni.showModal({
|
||||
title: '操作成功',
|
||||
content: '您的提现申请已成功提交',
|
||||
cancelText: '继续提现',
|
||||
confirmText: '查看记录',
|
||||
success: function (res) {
|
||||
res.confirm && sheep.$router.go('/pages/pay/withdraw-log');
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
async function getWithdrawRules() {
|
||||
let { error, data } = await sheep.$api.pay.withdraw.rules();
|
||||
if (error === 0) {
|
||||
state.rules = data;
|
||||
state.rulesList = filterRules(state.rules);
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getWithdrawRules();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-input-input {
|
||||
font-family: OPPOSANS !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-num-box {
|
||||
padding: 0 40rpx 80rpx;
|
||||
background: var(--ui-BG-Main) v-bind("sheep.$url.css('/static/img/shop/user/withdraw_bg.png')")
|
||||
center/750rpx 100% no-repeat;
|
||||
border-radius: 0 0 5% 5%;
|
||||
|
||||
.num-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.wallet-num {
|
||||
font-size: 60rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.log-btn {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 1rpx solid $white;
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// 提现输入卡片
|
||||
.draw-card {
|
||||
background-color: $white;
|
||||
border-radius: 20rpx;
|
||||
width: 690rpx;
|
||||
min-height: 560rpx;
|
||||
margin: -60rpx 30rpx 30rpx 30rpx;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bank-box {
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bank-list {
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 624rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 616rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bind-box {
|
||||
.placeholder-text {
|
||||
font-size: 26rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 22rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
background-color: var(--ui-BG-Main-light);
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 624rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 616rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 提现说明
|
||||
.draw-notice {
|
||||
width: 684rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #fffaee;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx 32rpx 0 32rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.draw-list {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="error-page">
|
||||
<s-empty
|
||||
v-if="errCode === 'NetworkError'"
|
||||
icon="/static/internet-empty.png"
|
||||
text="网络连接失败"
|
||||
showAction
|
||||
actionText="重新连接"
|
||||
@clickAction="onReconnect"
|
||||
buttonColor="#ff3000"
|
||||
></s-empty>
|
||||
<s-empty
|
||||
v-else-if="errCode === 'TemplateError'"
|
||||
icon="/static/internet-empty.png"
|
||||
text="未找到模板"
|
||||
showAction
|
||||
actionText="重新加载"
|
||||
@clickAction="onReconnect"
|
||||
buttonColor="#ff3000"
|
||||
></s-empty>
|
||||
<s-empty
|
||||
v-else-if="errCode !== ''"
|
||||
icon="/static/internet-empty.png"
|
||||
:text="errMsg"
|
||||
showAction
|
||||
actionText="重新加载"
|
||||
@clickAction="onReconnect"
|
||||
buttonColor="#ff3000"
|
||||
></s-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { ref } from 'vue';
|
||||
import { ShoproInit } from '@/sheep';
|
||||
|
||||
const errCode = ref('');
|
||||
const errMsg = ref('');
|
||||
onLoad((options) => {
|
||||
errCode.value = options.errCode;
|
||||
errMsg.value = options.errMsg;
|
||||
});
|
||||
// 重新连接
|
||||
async function onReconnect() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',
|
||||
});
|
||||
ShoproInit();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.error-page {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="常见问题" :bgStyle="{ color: '#FFF' }">
|
||||
<uni-collapse>
|
||||
<uni-collapse-item v-for="(item, index) in state.list" :key="item">
|
||||
<template v-slot:title>
|
||||
<view class="ss-flex ss-col-center header">
|
||||
<view class="ss-m-l-20 ss-m-r-20 icon">
|
||||
<view class="rectangle">
|
||||
<view class="num ss-flex ss-row-center ss-col-center">
|
||||
{{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="triangle"> </view>
|
||||
</view>
|
||||
<view class="title ss-m-t-36 ss-m-b-36">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="content ss-p-l-78 ss-p-r-40 ss-p-b-50 ss-p-t-20">
|
||||
<text class="text">{{ item.content }}</text>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<s-empty
|
||||
v-if="state.list.length === 0 && !state.loading"
|
||||
text="暂无常见问题"
|
||||
icon="/static/collect-empty.png"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: true,
|
||||
});
|
||||
|
||||
async function getFaqList() {
|
||||
const { error, data } = await sheep.$api.data.faq();
|
||||
if (error === 0) {
|
||||
state.list = data;
|
||||
state.loading = false;
|
||||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
getFaqList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 30rpx;
|
||||
max-width: 688rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
||||
.rectangle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40rpx;
|
||||
height: 36rpx;
|
||||
background: var(--ui-BG-Main);
|
||||
border-radius: 4px;
|
||||
|
||||
.num {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG);
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4rpx solid transparent;
|
||||
border-right: 4rpx solid transparent;
|
||||
border-top: 8rpx solid var(--ui-BG-Main);
|
||||
position: absolute;
|
||||
left: 16rpx;
|
||||
bottom: -4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1rpx solid #dfdfdf;
|
||||
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="问题反馈">
|
||||
<uni-forms ref="form" :modelValue="state.formData" border>
|
||||
<view class="bg-white type-box ss-p-x-20 ss-p-y-30">
|
||||
<view class="title ss-m-b-44">请选择类型</view>
|
||||
<view class="ss-m-l-12">
|
||||
<radio-group @change="radioChange">
|
||||
<label
|
||||
class="ss-flex ss-col-center ss-m-b-40"
|
||||
v-for="item in state.radioList"
|
||||
:key="item.type"
|
||||
>
|
||||
<view>
|
||||
<radio :value="item.type" color="var(--ui-BG-Main)" style="transform: scale(0.8)" />
|
||||
</view>
|
||||
<view class="radio-subtitle">{{ item.type }}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
|
||||
<view class="title ss-m-b-30"> 相关描述 </view>
|
||||
<view class="textarea">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="textarea"
|
||||
v-model="state.formData.content"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="客官~请描述您遇到的问题，建议上传照片"
|
||||
clearable
|
||||
></uni-easyinput>
|
||||
<s-uploader
|
||||
v-model:url="state.formData.images"
|
||||
fileMediatype="image"
|
||||
limit="9"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
></s-uploader>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
|
||||
<view class="title ss-m-b-30"> 联系方式 </view>
|
||||
<view class="mobile-box">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="number"
|
||||
v-model="state.formData.phone"
|
||||
paddingLeft="10"
|
||||
placeholder="请输入您的联系电话"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="ss-flex ss-row-between ss-p-x-30 ss-p-y-10">
|
||||
<button class="kefu-btn ss-reset-button" @tap="sheep.$router.go('/pages/chat/index')">
|
||||
联系客服
|
||||
</button>
|
||||
<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="onSubmit">
|
||||
提交
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive, ref, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const filesRef = ref(null);
|
||||
const state = reactive({
|
||||
radioList: [
|
||||
{
|
||||
type: '产品功能问题反馈',
|
||||
},
|
||||
{
|
||||
type: '建议及意见反馈',
|
||||
},
|
||||
{
|
||||
type: '投诉客服其他问题',
|
||||
},
|
||||
],
|
||||
formData: {
|
||||
content: '',
|
||||
phone: '',
|
||||
images: [],
|
||||
type: '',
|
||||
},
|
||||
imageFiles: [],
|
||||
current: 0,
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
if (!state.formData.type) {
|
||||
sheep.$helper.toast('请选择类型');
|
||||
return;
|
||||
}
|
||||
if (!state.formData.content) {
|
||||
sheep.$helper.toast('请描述您遇到的问题');
|
||||
return;
|
||||
}
|
||||
if (!state.formData.phone) {
|
||||
sheep.$helper.toast('请输入您的联系方式');
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await sheep.$api.app.feedback(state.formData);
|
||||
if (error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
function radioChange(e) {
|
||||
state.formData.type = e.detail.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.type-box {
|
||||
border-top: 2rpx solid #f9fafb;
|
||||
}
|
||||
|
||||
.uni-forms {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.uni-easyinput__placeholder-class {
|
||||
color: #bbbbbb !important;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-forms-item__label .label-text {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-textarea {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
margin-top: 4rpx !important;
|
||||
padding-left: 20rpx !important;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.icon-del-box {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
.icon-del {
|
||||
width: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-subtitle {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 322rpx;
|
||||
background: #f9fafb;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
margin: 30rpx 20rpx 46rpx 0;
|
||||
|
||||
.area {
|
||||
height: 238rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 50rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pl-style {
|
||||
font-size: 24rpx;
|
||||
color: #b1b3c7;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-box {
|
||||
background: #f9fafb;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 334rpx;
|
||||
height: 74rpx;
|
||||
border-radius: 37rpx;
|
||||
}
|
||||
|
||||
.kefu-btn {
|
||||
width: 334rpx;
|
||||
height: 74rpx;
|
||||
border-radius: 37rpx;
|
||||
background: #eeeeee;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" :title="state.title" :bgStyle="{ color: '#FFF' }">
|
||||
<view class="ss-p-30"><su-parse class="richtext" :content="state.content"></su-parse></view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const state = reactive({
|
||||
title: '',
|
||||
content: '',
|
||||
});
|
||||
|
||||
async function getRichTextContent(id) {
|
||||
const { error, data } = await sheep.$api.data.richtext(id);
|
||||
if (error === 0) {
|
||||
state.content = data.content;
|
||||
if (state.title === '') {
|
||||
state.title = data.title;
|
||||
uni.setNavigationBarTitle({
|
||||
title: state.title,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
if (options.title) {
|
||||
state.title = options.title;
|
||||
uni.setNavigationBarTitle({
|
||||
title: state.title,
|
||||
});
|
||||
}
|
||||
getRichTextContent(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.set-title {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.richtext {
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="系统设置" :bgStyle="{ color: '#fff' }">
|
||||
<view class="header-box ss-flex-col ss-row-center ss-col-center">
|
||||
<image
|
||||
class="logo-img ss-m-b-46"
|
||||
:src="sheep.$url.cdn(appInfo.logo)"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="name ss-m-b-24">{{ appInfo.name }}</view>
|
||||
</view>
|
||||
|
||||
<view class="container-list">
|
||||
<uni-list :border="false">
|
||||
<uni-list-item
|
||||
title="当前版本"
|
||||
:rightText="appInfo.version"
|
||||
showArrow
|
||||
clickable
|
||||
:border="false"
|
||||
class="list-border"
|
||||
@tap="onCheckUpdate"
|
||||
></uni-list-item>
|
||||
<uni-list-item
|
||||
title="本地缓存"
|
||||
:rightText="storageSize"
|
||||
showArrow
|
||||
:border="false"
|
||||
class="list-border"
|
||||
></uni-list-item>
|
||||
<uni-list-item
|
||||
title="意见反馈"
|
||||
showArrow
|
||||
clickable
|
||||
:border="false"
|
||||
class="list-border"
|
||||
@tap="sheep.$router.go('/pages/public/feedback')"
|
||||
></uni-list-item>
|
||||
<uni-list-item
|
||||
title="关于我们"
|
||||
showArrow
|
||||
clickable
|
||||
:border="false"
|
||||
class="list-border"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/public/richtext', {
|
||||
id: appInfo.about_us.id,
|
||||
title: appInfo.about_us.title,
|
||||
})
|
||||
"
|
||||
></uni-list-item>
|
||||
<!-- 为了过审 只有iOS-App有注销账号功能 -->
|
||||
<uni-list-item
|
||||
v-if="isLogin && sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
|
||||
title="注销账号"
|
||||
rightText=""
|
||||
showArrow
|
||||
clickable
|
||||
:border="false"
|
||||
class="list-border"
|
||||
@click="onLogoff"
|
||||
></uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
|
||||
<view class="set-footer ss-flex-col ss-row-center ss-col-center">
|
||||
<view class="agreement-box ss-flex ss-col-center ss-m-b-40">
|
||||
<view class="ss-flex ss-col-center ss-m-b-10">
|
||||
<view
|
||||
class="tcp-text"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/public/richtext', {
|
||||
id: appInfo.user_protocol.id,
|
||||
title: appInfo.user_protocol.title,
|
||||
})
|
||||
"
|
||||
>
|
||||
《{{ appInfo.user_protocol.title }}》
|
||||
</view>
|
||||
<view class="agreement-text">与</view>
|
||||
<view
|
||||
class="tcp-text"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/public/richtext', {
|
||||
id: appInfo.privacy_protocol.id,
|
||||
title: appInfo.privacy_protocol.title,
|
||||
})
|
||||
"
|
||||
>
|
||||
《{{ appInfo.privacy_protocol.title }}》
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="copyright-text ss-m-b-10">{{ appInfo.copyright }}</view>
|
||||
<view class="copyright-text">{{ appInfo.copytime }}</view>
|
||||
</view>
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="ss-p-x-20 ss-p-b-40">
|
||||
<button
|
||||
class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main"
|
||||
@tap="onLogout"
|
||||
v-if="isLogin"
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const appInfo = computed(() => sheep.$store('app').info);
|
||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||
const storageSize = uni.getStorageInfoSync().currentSize + 'Kb';
|
||||
const state = reactive({
|
||||
showModal: false,
|
||||
});
|
||||
|
||||
function onCheckUpdate() {
|
||||
sheep.$platform.checkUpdate();
|
||||
// 小程序初始化时已检查更新
|
||||
// H5实时更新无需检查
|
||||
// App 1.跳转应用市场更新 2.手动热更新 3.整包更新
|
||||
}
|
||||
function onLogoff() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认注销账号？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.user.logoff();
|
||||
if (error === 0) {
|
||||
sheep.$store('user').logout();
|
||||
sheep.$router.go('/pages/index/user');
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function onLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认退出账号？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const result = await sheep.$store('user').logout();
|
||||
if (result) {
|
||||
sheep.$router.go('/pages/index/user');
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.set-title {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.header-box {
|
||||
padding: 100rpx 0;
|
||||
|
||||
.logo-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 42rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-3;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
color: $gray-b;
|
||||
}
|
||||
}
|
||||
|
||||
.set-footer {
|
||||
margin: 100rpx 0 0 0;
|
||||
|
||||
.copyright-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: $gray-c;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.agreement-box {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.tcp-text {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loginout-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.list-border {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__content-title) {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__extra-text) {
|
||||
color: #bbbbbb;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<view><web-view :src="url"></web-view></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const url = ref('');
|
||||
onLoad((options) => {
|
||||
url.value = decodeURIComponent(options.url);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
|
||||
<uni-forms
|
||||
ref="addressFormRef"
|
||||
v-model="state.model"
|
||||
:rules="state.rules"
|
||||
validateTrigger="bind"
|
||||
labelWidth="160"
|
||||
labelAlign="left"
|
||||
border
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<view class="bg-white form-box ss-p-x-30">
|
||||
<uni-forms-item name="consignee" label="收货人" class="form-item">
|
||||
<uni-easyinput
|
||||
v-model="state.model.consignee"
|
||||
placeholder="请填写收货人姓名"
|
||||
:inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="mobile" label="手机号" class="form-item">
|
||||
<uni-easyinput
|
||||
v-model="state.model.mobile"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
:inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
name="region"
|
||||
label="省市区"
|
||||
@tap="state.showRegion = true"
|
||||
class="form-item"
|
||||
>
|
||||
<uni-easyinput
|
||||
v-model="state.model.region"
|
||||
disabled
|
||||
:inputBorder="false"
|
||||
:styles="{ disableColor: '#fff', color: '#333' }"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="请选择省市区"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
name="address"
|
||||
label="详细地址"
|
||||
:formItemStyle="{ alignItems: 'flex-start' }"
|
||||
:labelStyle="{ lineHeight: '5em' }"
|
||||
class="textarea-item"
|
||||
>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="textarea"
|
||||
v-model="state.model.address"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="请输入详细地址"
|
||||
clearable
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
|
||||
<view class="default-box-title"> 设为默认地址 </view>
|
||||
<su-switch style="transform: scale(0.8)" v-model="state.model.is_default"></su-switch>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
|
||||
<view class="footer-box ss-flex-col ss-row-between ss-p-20">
|
||||
<view class="ss-m-b-20"
|
||||
><button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button></view
|
||||
>
|
||||
<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
|
||||
删除
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<!-- 省市区弹窗 -->
|
||||
<su-region-picker
|
||||
:show="state.showRegion"
|
||||
@cancel="state.showRegion = false"
|
||||
@confirm="onRegionConfirm"
|
||||
>
|
||||
</su-region-picker>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, ref, reactive, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
import { consignee, mobile, address, region } from '@/sheep/validate/form';
|
||||
|
||||
const addressFormRef = ref(null);
|
||||
const state = reactive({
|
||||
showRegion: false,
|
||||
model: {
|
||||
consignee: '',
|
||||
mobile: '',
|
||||
address: '',
|
||||
is_default: false,
|
||||
region: '',
|
||||
},
|
||||
rules: {
|
||||
consignee,
|
||||
mobile,
|
||||
address,
|
||||
region,
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => state.model.province_name,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
state.model.region = `${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
const onRegionConfirm = (e) => {
|
||||
state.model = {
|
||||
...state.model,
|
||||
...e,
|
||||
};
|
||||
state.showRegion = false;
|
||||
};
|
||||
const getAreaData = () => {
|
||||
if (_.isEmpty(uni.getStorageSync('areaData'))) {
|
||||
sheep.$api.data.area().then((res) => {
|
||||
if (res.error === 0) {
|
||||
uni.setStorageSync('areaData', res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const onSave = async () => {
|
||||
const validate = await unref(addressFormRef)
|
||||
.validate()
|
||||
.catch((error) => {
|
||||
console.log('error: ', error);
|
||||
});
|
||||
if (!validate) return;
|
||||
|
||||
let res = null;
|
||||
if (state.model.id) {
|
||||
res = await sheep.$api.user.address.update(state.model.id, state.model);
|
||||
} else {
|
||||
res = await sheep.$api.user.address.create(state.model);
|
||||
}
|
||||
if (res.error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除此收货地址吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.user.address.delete(state.model.id);
|
||||
if (res.error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
onLoad(async (options) => {
|
||||
getAreaData();
|
||||
if (options.id) {
|
||||
let res = await sheep.$api.user.address.detail(options.id);
|
||||
if (res.error === 0) {
|
||||
state.model = {
|
||||
...state.model,
|
||||
...res.data,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (options.data) {
|
||||
let data = JSON.parse(options.data);
|
||||
state.model = {
|
||||
...state.model,
|
||||
...data,
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-forms-item__label .label-text {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-textarea {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
margin-top: 8rpx !important;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.is-textarea-icon {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.default-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100rpx;
|
||||
|
||||
.default-box-title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: var(--ui-BG);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
|
||||
<view v-if="state.list.length">
|
||||
<s-address-item
|
||||
hasBorderBottom
|
||||
v-for="item in state.list"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@tap="onSelect(item)"
|
||||
>
|
||||
</s-address-item>
|
||||
</view>
|
||||
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="footer-box ss-flex ss-row-between ss-p-20">
|
||||
<!-- 微信小程序和微信H5 -->
|
||||
<button
|
||||
v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
|
||||
@tap="importWechatAddress"
|
||||
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center"
|
||||
>
|
||||
<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
|
||||
导入微信地址
|
||||
</button>
|
||||
<button
|
||||
class="add-btn ss-reset-button ui-Shadow-Main"
|
||||
@tap="sheep.$router.go('/pages/user/address/edit')"
|
||||
>
|
||||
新增收货地址
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<s-empty
|
||||
v-if="state.list.length === 0 && !state.loading"
|
||||
text="暂无收货地址"
|
||||
icon="/static/data-empty.png"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onBeforeMount } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: true,
|
||||
});
|
||||
|
||||
// 选择收货地址， 有h5端需返回两次的bug
|
||||
const onSelect = (addressInfo) => {
|
||||
// const pages = sheep.$router.getCur();
|
||||
// const lastPage = pages[pages.length - 2];
|
||||
// if (!_.isEmpty(lastPage) && lastPage.route === "pages/order/confirm") {
|
||||
// sheep.$router.back();
|
||||
// uni.navigateBack();
|
||||
uni.$emit('SELECT_ADDRESS', {
|
||||
addressInfo,
|
||||
});
|
||||
sheep.$router.back();
|
||||
// }
|
||||
};
|
||||
|
||||
// 导入微信地址
|
||||
function importWechatAddress() {
|
||||
let wechatAddress = {};
|
||||
// #ifdef MP
|
||||
uni.chooseAddress({
|
||||
success: (res) => {
|
||||
wechatAddress = {
|
||||
consignee: res.userName,
|
||||
mobile: res.telNumber,
|
||||
province_name: res.provinceName,
|
||||
city_name: res.cityName,
|
||||
district_name: res.countyName,
|
||||
address: res.detailInfo,
|
||||
region: '',
|
||||
is_default: false,
|
||||
};
|
||||
if (!isEmpty(wechatAddress)) {
|
||||
sheep.$router.go('/pages/user/address/edit', {
|
||||
data: JSON.stringify(wechatAddress),
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
sheep.$platform.useProvider('wechat').jssdk.openAddress({
|
||||
success: (res) => {
|
||||
wechatAddress = {
|
||||
consignee: res.userName,
|
||||
mobile: res.telNumber,
|
||||
province_name: res.provinceName,
|
||||
city_name: res.cityName,
|
||||
district_name: res.countryName,
|
||||
address: res.detailInfo,
|
||||
region: '',
|
||||
is_default: false,
|
||||
};
|
||||
if (!isEmpty(wechatAddress)) {
|
||||
sheep.$router.go('/pages/user/address/edit', {
|
||||
data: JSON.stringify(wechatAddress),
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
onShow(async () => {
|
||||
state.list = (await sheep.$api.user.address.list()).data;
|
||||
state.loading = false;
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (!!uni.getStorageSync('areaData')) {
|
||||
return;
|
||||
}
|
||||
// 提前加载省市区数据
|
||||
sheep.$api.data.area().then((res) => {
|
||||
if (res.error === 0) {
|
||||
uni.setStorageSync('areaData', res.data);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-box {
|
||||
.add-btn {
|
||||
flex: 1;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 80rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 80rpx;
|
||||
color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sync-wxaddress {
|
||||
flex: 1;
|
||||
line-height: 80rpx;
|
||||
background: $white;
|
||||
border-radius: 80rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user