🎉 init: 初始化仓库
This commit is contained in:
sundongyu
commit
826ef990d3
2
.env.development
Normal file
2
.env.development
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
VITE_BASE_URL = 'https://testpay.dykj.co'
|
||||
VITE_TOKEN = ''
|
||||
2
.env.porduction
Normal file
2
.env.porduction
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
VITE_BASE_URL = 'https://testpay.dykj.co'
|
||||
VITE_TOKEN = ''
|
||||
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
node_modules
|
||||
unpackage
|
||||
uni_modules
|
||||
16
.hbuilderx/launch.json
Normal file
16
.hbuilderx/launch.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"default" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
App.vue
Normal file
21
App.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log('App Launch');
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show');
|
||||
},
|
||||
onHide: function () {
|
||||
console.log('App Hide');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
.box {
|
||||
background-color: #f7f7fa;
|
||||
display: flow-root;
|
||||
}
|
||||
</style>
|
||||
17
api/commodity/index.js
Normal file
17
api/commodity/index.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { http } from '@/utils/request.js';
|
||||
// 查询所有商品参数
|
||||
export function APIGetcommoditylist() {
|
||||
return http.get('/api/wGoods/getGoods');
|
||||
}
|
||||
//查询分类商品
|
||||
export function APIGetclassifylist(wCateid) {
|
||||
return http.get(`/api/wGoods/getGoodsByWCateid?wCateid=${wCateid}`);
|
||||
}
|
||||
//查询所有分类
|
||||
export function APIAllcategorieslist() {
|
||||
return http.get('/api/wcate/getCate');
|
||||
}
|
||||
// 查询商品详情
|
||||
export function APIparticulars(id) {
|
||||
return http.get(`/api/wGoods/getGoodsById?id=${id}`);
|
||||
}
|
||||
9
api/order/index.js
Normal file
9
api/order/index.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { http } from '@/utils/request.js';
|
||||
// 生成订单
|
||||
export function APIPostCreateOrder(data) {
|
||||
return http.post('/api/oder/addOder', data);
|
||||
}
|
||||
// 支付订单
|
||||
export function APIGetpayment(orderNo) {
|
||||
return http.get(`/api/wx/login/wxpay?orderNo=${orderNo}`);
|
||||
}
|
||||
17
api/site/index.js
Normal file
17
api/site/index.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { http } from '@/utils/request.js';
|
||||
// 修改地址
|
||||
export function APIPostModificationAddress(data) {
|
||||
return http.post('/api/waddress/updateWaddress', data);
|
||||
}
|
||||
// 添加地址
|
||||
export function APIPostAddAddress(data) {
|
||||
return http.post('/api/waddress/addWaddress', data);
|
||||
}
|
||||
// 查询地址
|
||||
export function APIGetinquireAddress() {
|
||||
return http.get('/api/waddress/getWaddressByuid');
|
||||
}
|
||||
// 删除地址
|
||||
export function APIGetDeleteAddress(id) {
|
||||
return http.get(`/api/waddress/deleteWaddress?id=${id}`);
|
||||
}
|
||||
5
api/user/index.js
Normal file
5
api/user/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { http } from '@/utils/request.js';
|
||||
// 登录
|
||||
export function APIuserLogin(code) {
|
||||
return http.get(`/api/wx/login/dologin?code=${code}`);
|
||||
}
|
||||
44
components/shoppingIcon.vue
Normal file
44
components/shoppingIcon.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<view v-if="quantity >= 1" @click="click" class="fixed-view">
|
||||
<view class="fixed-view-icon">
|
||||
<uni-icons color="#fff" type="cart-filled" size="35"></uni-icons>
|
||||
<uni-badge class="uni-badge-left-margin" :text="quantity" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
//购物车是有商品
|
||||
const quantity = ref(1);
|
||||
// 购物车跳转
|
||||
const click = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/components/shoppingCart'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fixed-view {
|
||||
position: fixed; // 使用fixed定位使元素固定
|
||||
bottom: 20%; // 距离底部的距离，可根据需要调整
|
||||
right: 2%; // 距离右侧的距离，可根据需要调整
|
||||
z-index: 10; // 确保元素在最上层
|
||||
.fixed-view-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
.uni-badge-left-margin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
index.html
Normal file
20
index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
main.js
Normal file
22
main.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
72
manifest.json
Normal file
72
manifest.json
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
{
|
||||
"name": "dykj-water-supply station",
|
||||
"appid": "__UNI__E1D98F3",
|
||||
"description": "",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules": {},
|
||||
/* 应用发布信息 */
|
||||
"distribute": {
|
||||
/* android打包配置 */
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios": {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs": {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp": {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin": {
|
||||
"appid": "wx1f8fbec46293a728",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-alipay": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion": "3"
|
||||
}
|
||||
88
package-lock.json
generated
Normal file
88
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
{
|
||||
"name": "dykj-water-supply station",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"luch-request": "^3.1.1",
|
||||
"pinia": "^2.1.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@dcloudio/types": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmjs.org/@dcloudio/types/-/types-2.6.12.tgz",
|
||||
"integrity": "sha512-mrCMwcINy1IFjU9VUqLeWBkj404yWs5paLDttBcA+eqUjanuUQbBcTVPqlrGgkyzLXDcV2oDDZRSNxNpXi4kMQ=="
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
|
||||
"integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
|
||||
},
|
||||
"node_modules/luch-request": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/luch-request/-/luch-request-3.1.1.tgz",
|
||||
"integrity": "sha512-p7+mlcEtgRcd0OfXC4XZbyiwSr1XgCeqNT7LlVUjnk7InYl/8d5Rk7BUqAYNA2WRafI1wRIUQWRWZRpeUwWR0w==",
|
||||
"dependencies": {
|
||||
"@dcloudio/types": "^2.0.16"
|
||||
}
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
|
||||
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.5.0",
|
||||
"vue-demi": ">=0.14.5"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.3.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
|
||||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
|
||||
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vue-demi": {
|
||||
"version": "0.14.8",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
|
||||
"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
package.json
Normal file
6
package.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"luch-request": "^3.1.1",
|
||||
"pinia": "^2.1.7"
|
||||
}
|
||||
}
|
||||
135
pages.json
Normal file
135
pages.json
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/components/coupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠券"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/index/components/shoppingCart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/components/switchStores",
|
||||
"style": {
|
||||
"navigationBarTitleText": "切换门店"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order-water/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订水"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/water-coupon/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "水票"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/water-coupon/components/particulars",
|
||||
"style": {
|
||||
"navigationBarTitleText": "水票详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shopp/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shopp/components/commodityDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shopp/components/orderForm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/components/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/components/myOrder",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/components/myAddress",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收货地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/components/addShippingAddress",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新增地址"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "水站",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"uniIdRouter": {},
|
||||
"tabBar": {
|
||||
"list": [{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
// "iconPath": "https://i.postimg.cc/SQ2gyt5d/image.png",
|
||||
// "selectedIconPath": "https://i.postimg.cc/vZLPJgjd/image.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/water-coupon/index",
|
||||
"text": "水票"
|
||||
// "iconPath": "https://i.postimg.cc/N0sNBGq2/image.png",
|
||||
// "selectedIconPath": "https://i.postimg.cc/qRgj6m7k/image.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/order-water/index",
|
||||
"text": "订水"
|
||||
// "iconPath": "https://i.postimg.cc/MT4t7yc1/image.png",
|
||||
// "selectedIconPath": "https://i.postimg.cc/tJxk2YPw/image.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/shopp/index",
|
||||
"text": "商城"
|
||||
// "iconPath": "https://i.postimg.cc/MT4t7yc1/image.png",
|
||||
// "selectedIconPath": "https://i.postimg.cc/tJxk2YPw/image.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/my/index",
|
||||
"text": "我的"
|
||||
// "iconPath": "https://i.postimg.cc/nhtRSY3k/image.png",
|
||||
// "selectedIconPath": "https://i.postimg.cc/nL33z8pR/image.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
74
pages/index/components/coupon.vue
Normal file
74
pages/index/components/coupon.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="img">
|
||||
<img src="https://i.postimg.cc/Vkf063Xd/image.jpg" style="width: 100%; border-radius: 1rem 0 0 1rem" />
|
||||
<view class="img-box">
|
||||
<view class="img-box-one">测试</view>
|
||||
<view class="img-box-tow">满80.00元可用</view>
|
||||
<view class="img-box-three">有效期2024.05.29-2024.06.30</view>
|
||||
</view>
|
||||
<view class="img-button">
|
||||
<view class="img-button-one">￥50.00</view>
|
||||
<view class="img-button-tow">领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.img {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
display: flow-root;
|
||||
margin-top: 1rem;
|
||||
position: relative;
|
||||
.img-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 15rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
.img-box-one {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.img-box-tow {
|
||||
background-color: #fff;
|
||||
margin-top: 0.2rem;
|
||||
padding: 0.2rem 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
color: red;
|
||||
}
|
||||
.img-box-three {
|
||||
margin-top: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.img-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5%;
|
||||
.img-button-one {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
.img-button-tow {
|
||||
margin-top: 1.2rem;
|
||||
background-color: #ffdecc;
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: red;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
252
pages/index/components/shoppingCart.vue
Normal file
252
pages/index/components/shoppingCart.vue
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 商品 -->
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :right-options="options2" :show="isOpened" :auto-close="false" @change="change" @click="bindClick">
|
||||
<view class="content-box">
|
||||
<view @click="pitch" class="content-box-icon" :class="{ active: state }">
|
||||
<uni-icons v-show="state" color="#fff" type="checkmarkempty" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="content-box-my">
|
||||
<image src="../../../static/logo.png" style="width: 5.5rem; height: 5.5rem"></image>
|
||||
<view class="content-box-my-text">
|
||||
<view style="margin-bottom: 0.3rem">我的</view>
|
||||
<view style="font-size: 0.7rem; color: #ff7e2e; margin-bottom: 0.3rem">￥1.00</view>
|
||||
<view style="font-size: 0.9rem; color: #a0a4b1">已售0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-box-count">
|
||||
<view class="content-box-count-calculate-subtract" :class="{ active: quantity >= 2 }" @click="subtract">
|
||||
<text style="font-size: 1.5rem">-</text>
|
||||
</view>
|
||||
<view style="font-size: 1rem; margin: 0 0.5rem">{{ quantity }}</view>
|
||||
<view @click="calculate" class="content-box-count-calculate">
|
||||
<uni-icons color="#fff" type="plusempty" size="18"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
<!-- 左滑删除 -->
|
||||
<view class="box-text">左滑可删除商品</view>
|
||||
<!-- 清空购物车 -->
|
||||
<view class="box-buttom">
|
||||
<view class="box-buttom-box">清空购物车</view>
|
||||
</view>
|
||||
<!-- 提交订单 -->
|
||||
<view class="box-navigation">
|
||||
<view class="box-navigation-text">
|
||||
<view @click="cancel" class="box-navigation-text-icon" :class="{ active: state }">
|
||||
<uni-icons v-show="state" color="#fff" type="checkmarkempty" size="16"></uni-icons>
|
||||
</view>
|
||||
<view @click="cancel" class="box-navigation-text-text">取消</view>
|
||||
</view>
|
||||
<view :class="{ active: state }" class="box-navigation-box">提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
// 左滑删除
|
||||
const show = ref(true);
|
||||
const isOpened = ref('none');
|
||||
const options2 = ref([
|
||||
{
|
||||
text: '取消',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '确认',
|
||||
style: {
|
||||
backgroundColor: '#F56C6C'
|
||||
}
|
||||
}
|
||||
]);
|
||||
function change(e) {
|
||||
isOpened.value = e;
|
||||
console.log('返回', e);
|
||||
}
|
||||
function bindClick(e) {
|
||||
console.log(e.content.text);
|
||||
if (e.content.text === '确认') {
|
||||
isOpened.value = 'none';
|
||||
uni.showToast({
|
||||
title: '删除成功'
|
||||
});
|
||||
} else if (e.content.text === '取消') {
|
||||
isOpened.value = 'none';
|
||||
uni.showToast({
|
||||
title: '取消删除'
|
||||
});
|
||||
}
|
||||
}
|
||||
//选中商品
|
||||
const state = ref(true);
|
||||
const pitch = () => {
|
||||
state.value = !state.value;
|
||||
};
|
||||
|
||||
// 购物车计算
|
||||
// 商品数量
|
||||
const quantity = ref(1);
|
||||
// 商品减
|
||||
const subtract = () => {
|
||||
if (quantity.value === 1) {
|
||||
return;
|
||||
}
|
||||
quantity.value = quantity.value - 1;
|
||||
};
|
||||
// 商品加
|
||||
const calculate = () => {
|
||||
quantity.value = quantity.value + 1;
|
||||
};
|
||||
// 提交订单
|
||||
const cancel = () => {
|
||||
state.value = !state.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
min-height: 90vh;
|
||||
}
|
||||
.content-box {
|
||||
height: 8rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.content-box-icon {
|
||||
background-color: #fff;
|
||||
border: 1px solid #cdd0d6;
|
||||
border-radius: 50%;
|
||||
width: 1.2rem;
|
||||
height: 1.2em;
|
||||
margin-left: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
// 选中
|
||||
.active {
|
||||
background-color: #00ba26;
|
||||
border: 1px solid #00ba26;
|
||||
}
|
||||
.content-box-my {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transform: translateX(-2rem);
|
||||
.content-box-my-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
.content-box-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 0.5rem;
|
||||
.content-box-count-calculate-subtract {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid #eceef5;
|
||||
color: #eceef5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-box-count-calculate {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid #eef4ff;
|
||||
border-radius: 50%;
|
||||
background-color: #00ba26;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid #00ba26;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9rem;
|
||||
color: #9ea3b0;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.box-buttom {
|
||||
width: 40%;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
background-color: #fff;
|
||||
color: #00ba26;
|
||||
border: 1px solid #00ba26;
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
padding: 0.6rem 0rem;
|
||||
border-radius: 1.5rem;
|
||||
.box-buttom-box {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.box-navigation {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
height: 4rem;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.box-navigation-text {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.box-navigation-text-icon {
|
||||
background-color: #fff;
|
||||
border: 1px solid #cdd0d6;
|
||||
border-radius: 50%;
|
||||
width: 1.2rem;
|
||||
height: 1.2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.box-navigation-text-text {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.active {
|
||||
background-color: #00ba26;
|
||||
border: 1px solid #00ba26;
|
||||
}
|
||||
}
|
||||
.box-navigation-box {
|
||||
background-color: #f0f1f5;
|
||||
color: #aeb2c1;
|
||||
border-radius: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
padding: 0.7rem 2.5rem;
|
||||
}
|
||||
// 选中
|
||||
.active {
|
||||
background-color: #00ba26;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
pages/index/components/switchStores.vue
Normal file
76
pages/index/components/switchStores.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="box-card">
|
||||
<view class="box-card-up">
|
||||
<view style="font-weight: 700">亿元桶</view>
|
||||
<view style="font-size: 0.6rem; color: #ff7d64">距您1682.40km</view>
|
||||
</view>
|
||||
<view class="box-card-center">
|
||||
<view><uni-icons color="#838c9e" type="location" size="20"></uni-icons></view>
|
||||
<view class="">上海市</view>
|
||||
</view>
|
||||
<view style="overflow: hidden">
|
||||
<view class="box-card-buttom">确定选择</view>
|
||||
<view class="box-card-buttomtow">
|
||||
<uni-icons color="#00ba26" type="checkmarkempty" size="26"></uni-icons>
|
||||
<view>当前选择</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
display: flow-root;
|
||||
}
|
||||
.box-card {
|
||||
background-color: #fff;
|
||||
margin: 1rem 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
.box-card-up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem 0rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.box-card-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem 0.9rem 0rem;
|
||||
color: #838c9e;
|
||||
}
|
||||
.box-card-buttom {
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
background-color: #00ba26;
|
||||
border: 1px solid #00ba26;
|
||||
border-radius: 1.5rem;
|
||||
color: #fff;
|
||||
height: 2.8rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.box-card-buttomtow {
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border: 1px solid #00ba26;
|
||||
border-radius: 1.5rem;
|
||||
color: #00ba26;
|
||||
height: 2.8rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
498
pages/index/index.vue
Normal file
498
pages/index/index.vue
Normal file
|
|
@ -0,0 +1,498 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 门店授权 -->
|
||||
<view class="location">
|
||||
<view class="location-left">
|
||||
<view><uni-icons type="location" size="20"></uni-icons></view>
|
||||
<view>暂未添加门店或定位未授权</view>
|
||||
</view>
|
||||
<view @click="location" class="location-right">
|
||||
<view>切换</view>
|
||||
<view><uni-icons type="right" size="20"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 轮播图 -->
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 图片 -->
|
||||
<view class="img">
|
||||
<image class="image" src="../../static/logo.png" mode=""></image>
|
||||
</view>
|
||||
<!-- 优惠劵 -->
|
||||
<view class="discount-coupon">
|
||||
<view class="discount-coupon-one">
|
||||
<view class="discount-coupon-one-left">
|
||||
<image src="../../static/logo.png" style="width: 1.4rem; height: 1.4rem"></image>
|
||||
<view style="margin-left: 0.5rem; font-weight: 700">优惠劵</view>
|
||||
</view>
|
||||
<view @click="discount" class="discount-coupon-one-right">
|
||||
<view style="font-size: 0.8rem; color: #7e828b">查看更多</view>
|
||||
<view style="margin-right: 0.8rem"><uni-icons type="right" size="18"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="discount-coupon-tow">
|
||||
<!-- 暂无数据 -->
|
||||
<view v-if="data" class="discount-coupon-tow-notAvailable">暂无数据</view>
|
||||
<!-- 优惠劵 -->
|
||||
<view v-else class="discountsImg">
|
||||
<img src="https://i.postimg.cc/Vkf063Xd/image.jpg" style="width: 100%; height: 7rem; border-radius: 1rem 0 0 1rem" />
|
||||
<view class="img-box">
|
||||
<view class="img-box-one">测试</view>
|
||||
<view class="img-box-tow">满80.00元可用</view>
|
||||
<view class="img-box-three">有效期2024.05.29-2024.06.30</view>
|
||||
</view>
|
||||
<view class="img-button">
|
||||
<view class="img-button-one">￥50.00</view>
|
||||
<view class="img-button-tow">领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 水票 -->
|
||||
<view class="water-coupon">
|
||||
<view class="water-coupon-one">
|
||||
<view class="water-coupon-one-left">
|
||||
<image src="../../static/logo.png" style="width: 1.4rem; height: 1.4rem"></image>
|
||||
<view style="margin-left: 0.5rem; font-weight: 700">推荐水票</view>
|
||||
</view>
|
||||
<view @click="water" class="water-coupon-one-right">
|
||||
<view style="font-size: 0.8rem; color: #7e828b">查看更多</view>
|
||||
<view style="margin-right: 0.8rem"><uni-icons type="right" size="18"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="water-coupon-tow">
|
||||
<!-- 暂无数据 -->
|
||||
<view v-if="data" class="water-coupon-tow-notAvailable">暂无数据</view>
|
||||
<!-- 水票 -->
|
||||
<view v-else class="water">
|
||||
<view class="water-left">
|
||||
<view class="water-left-left">
|
||||
<image class="image" src="../../static/logo.png"></image>
|
||||
</view>
|
||||
<view class="water-left-right">
|
||||
<view class="water-left-right-up">测试</view>
|
||||
<view class="water-left-right-centre">
|
||||
<text style="color: #8e8aac; font-size: 0.9rem">活动</text>
|
||||
<text style="color: #ff6600; margin-left: 0.5rem; font-size: 0.9rem">测试</text>
|
||||
</view>
|
||||
<view class="water-left-right-button">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 1.5rem">4.00</text>
|
||||
<text style="color: #8e8aac">/</text>
|
||||
<text style="color: #8e8aac">桶</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="water-right">
|
||||
<view class="water-right-buttom">购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品 -->
|
||||
<view class="commodity">
|
||||
<view class="commodity-one">
|
||||
<view class="commodity-one-left">
|
||||
<image src="../../static/logo.png" style="width: 1.4rem; height: 1.4rem"></image>
|
||||
<view style="margin-left: 0.5rem; font-weight: 700">推荐商品</view>
|
||||
</view>
|
||||
<view @click="commodity" class="commodity-one-right">
|
||||
<view style="font-size: 0.8rem; color: #7e828b">查看更多</view>
|
||||
<view style="margin-right: 0.8rem"><uni-icons type="right" size="18"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="commodity-tow">
|
||||
<!--暂无数据 -->
|
||||
<view v-if="data" class="commodity-tow-notAvailable">暂无数据</view>
|
||||
<!-- 商品 -->
|
||||
<view v-else class="commodity-three">
|
||||
<view class="commodity-three-left">
|
||||
<view class="commodity-three-left-left">
|
||||
<image class="image" src="../../static/logo.png"></image>
|
||||
</view>
|
||||
<view class="commodity-three-left-right">
|
||||
<view class="commodity-three-left-right-up">测试</view>
|
||||
<view class="commodity-three-left-right-button">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 1.5rem">4.00</text>
|
||||
<text style="color: #8e8aac">/</text>
|
||||
<text style="color: #8e8aac">桶</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="commodity-three-right">
|
||||
<view class="commodity-three-right-buttom">购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<shoppingIcon />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import shoppingIcon from '@/components/shoppingIcon.vue';
|
||||
const data = ref(false);
|
||||
// 轮播图
|
||||
const background = ref(['color1', 'color2', 'color3']);
|
||||
// 指点器
|
||||
const indicatorDots = ref(true);
|
||||
//是否自动切换
|
||||
const autoplay = ref(true);
|
||||
const interval = ref(2000);
|
||||
const duration = ref(500);
|
||||
|
||||
function changeIndicatorDots() {
|
||||
indicatorDots.value = !indicatorDots.value;
|
||||
}
|
||||
function changeAutoplay() {
|
||||
autoplay.value = !autoplay.value;
|
||||
}
|
||||
function intervalChange(e) {
|
||||
interval.value = parseInt(e.target.value, 10);
|
||||
}
|
||||
function durationChange(e) {
|
||||
duration.value = parseInt(e.target.value, 10);
|
||||
}
|
||||
//优惠劵
|
||||
const discount = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/components/coupon'
|
||||
});
|
||||
};
|
||||
//水票
|
||||
const water = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/water-coupon/index'
|
||||
});
|
||||
};
|
||||
//商城
|
||||
const commodity = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/shopp/index'
|
||||
});
|
||||
};
|
||||
//切换门店
|
||||
const location = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/components/switchStores'
|
||||
});
|
||||
};
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 优惠劵
|
||||
.discount-coupon {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
display: flow-root;
|
||||
.discount-coupon-one {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.discount-coupon-one-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.discount-coupon-one-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.discount-coupon-tow {
|
||||
.discount-coupon-tow-notAvailable {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #7e828b;
|
||||
height: 6rem;
|
||||
}
|
||||
.discountsImg {
|
||||
display: flow-root;
|
||||
position: relative;
|
||||
padding: 0.5rem 0rem;
|
||||
.img-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 15rem;
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: -4%;
|
||||
.img-box-one {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
}
|
||||
.img-box-tow {
|
||||
background-color: #fff;
|
||||
margin-top: 0.2rem;
|
||||
padding: 0.2rem 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
color: red;
|
||||
}
|
||||
.img-box-three {
|
||||
margin-top: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.img-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
right: 3%;
|
||||
.img-button-one {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
.img-button-tow {
|
||||
margin-top: 1.2rem;
|
||||
background-color: #ffdecc;
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: red;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//水票
|
||||
.water-coupon {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
.water-coupon-one {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.water-coupon-one-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.water-coupon-one-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.water-coupon-tow {
|
||||
.water-coupon-tow-notAvailable {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #7e828b;
|
||||
height: 6rem;
|
||||
}
|
||||
.water {
|
||||
width: 83%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
.water-left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.water-left-left {
|
||||
.image {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.water-left-right {
|
||||
margin-left: 0.8rem;
|
||||
.water-left-right-up {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.water-left-right-centre {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.water-left-right-button {
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.water-right {
|
||||
.water-right-buttom {
|
||||
padding: 0rem 1rem;
|
||||
color: #fff;
|
||||
background-color: #00ba26;
|
||||
height: 2.2rem;
|
||||
line-height: 2.2rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//商品
|
||||
.commodity {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
.commodity-one {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.commodity-one-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.commodity-one-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.commodity-tow {
|
||||
.commodity-tow-notAvailable {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #7e828b;
|
||||
height: 6rem;
|
||||
}
|
||||
.commodity-three {
|
||||
width: 83%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
.commodity-three-left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.commodity-three-left-left {
|
||||
.image {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.commodity-three-left-right {
|
||||
margin-left: 0.8rem;
|
||||
.water-left-right-up {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.commodity-three-left-right-button {
|
||||
margin-top: 2rem;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.commodity-three-right {
|
||||
.commodity-three-right-buttom {
|
||||
padding: 0rem 1rem;
|
||||
color: #fff;
|
||||
background-color: #00ba26;
|
||||
height: 2.2rem;
|
||||
line-height: 2.2rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 轮播图
|
||||
.uni-margin-wrap {
|
||||
width: 92%;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.uni-common-mt {
|
||||
margin-top: 60rpx;
|
||||
position: relative;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
}
|
||||
.uni-padding-wrap {
|
||||
width: 550rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 图片
|
||||
.img {
|
||||
margin: 0 auto;
|
||||
width: 92%;
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
//定位
|
||||
.location {
|
||||
width: 83%;
|
||||
margin: 0.5rem auto;
|
||||
padding: 0.5rem 0.8rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
.location-left {
|
||||
display: flex;
|
||||
}
|
||||
.location-right {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
pages/my/components/addShippingAddress.vue
Normal file
166
pages/my/components/addShippingAddress.vue
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="example">
|
||||
<!-- 基础表单校验 -->
|
||||
<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
|
||||
<uni-forms-item label="收货人" name="name">
|
||||
<uni-easyinput v-model="formData.name" placeholder="请输入收货人姓名(最多5个字)" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="联系电话" name="phone">
|
||||
<uni-easyinput v-model="formData.phone" placeholder="请输入联系电话" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="所在地区" name="region">
|
||||
<uni-data-picker
|
||||
placeholder="请选择所在地区"
|
||||
popup-title="请选择所在地区"
|
||||
:localdata="dataTree"
|
||||
v-model="formData.region"
|
||||
@change="onchange"
|
||||
@nodeclick="onnodeclick"
|
||||
@popupopened="onpopupopened"
|
||||
@popupclosed="onpopupclosed"
|
||||
></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="详细地址" name="introduction">
|
||||
<uni-easyinput type="textarea" v-model="formData.site" placeholder="请输入详细地址" />
|
||||
</uni-forms-item>
|
||||
<button type="primary" @click="submit">保存地址</button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { APIPostAddAddress, APIPostModificationAddress } from '@/api/site/index.js';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
name: '',
|
||||
phone: '',
|
||||
region: '',
|
||||
site: '',
|
||||
id: ''
|
||||
});
|
||||
//获取表单本身
|
||||
const valiForm = ref(null);
|
||||
// 校验规则;
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '姓名不能为空'
|
||||
}
|
||||
]
|
||||
},
|
||||
phone: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '手机号不能为空'
|
||||
},
|
||||
{
|
||||
format: 'number',
|
||||
errorMessage: '手机号格式不对'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
// 提交表单的处理函数
|
||||
const submit = () => {
|
||||
valiForm.value
|
||||
.validate()
|
||||
.then((res) => {
|
||||
if (formData.value.id) {
|
||||
uni.showToast({
|
||||
title: `修改成功`
|
||||
});
|
||||
PostModificationAddress();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `校验通过`
|
||||
});
|
||||
PostAddAddress();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err);
|
||||
});
|
||||
};
|
||||
const dataTree = ref([
|
||||
{
|
||||
text: '一年级',
|
||||
value: '1-0',
|
||||
children: [
|
||||
{ text: '1.1班', value: '1-1' },
|
||||
{ text: '1.2班', value: '1-2' }
|
||||
]
|
||||
}
|
||||
]);
|
||||
// 定义方法
|
||||
// 点击子节点
|
||||
const onNodeClick = (e) => {
|
||||
console.log(e);
|
||||
};
|
||||
//弹出层弹出时触发
|
||||
const onPopupOpened = () => {
|
||||
console.log('popupopened');
|
||||
};
|
||||
//弹出层弹关闭时触发
|
||||
const onPopupClosed = () => {
|
||||
console.log('popupclosed');
|
||||
};
|
||||
// 选择完成
|
||||
const onChange = (e) => {
|
||||
console.log('onchange:', e);
|
||||
};
|
||||
// 添加地址
|
||||
const PostAddAddress = async () => {
|
||||
const res = await APIPostAddAddress({ address: formData.value.site, addressName: formData.value.name, addressPhone: formData.value.phone });
|
||||
if (res.code === 200) {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
};
|
||||
//编辑地址
|
||||
const PostModificationAddress = async () => {
|
||||
const res = await APIPostModificationAddress({ address: formData.value.site, addressName: formData.value.name, addressPhone: formData.value.phone, id: formData.value.id });
|
||||
if (res.code === 200) {
|
||||
formData.value.id = '';
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
};
|
||||
//编辑地址
|
||||
onLoad((option) => {
|
||||
formData.value.name = option.name;
|
||||
formData.value.phone = option.phone;
|
||||
formData.value.site = option.address;
|
||||
formData.value.id = option.id;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.example {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
137
pages/my/components/login.vue
Normal file
137
pages/my/components/login.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<view class="login">
|
||||
<view class="headPortrait">
|
||||
<image :src="headPortrait"></image>
|
||||
</view>
|
||||
<view class="name">{{ userName }}</view>
|
||||
<view class="signature">
|
||||
您暂未授权小程序获取您的信息,将无法使用小程序会员相关功能。如需正常使用,请点击“授权登录”按钮,进行授权登录绑定。登录绑定后享受消费返积分活动以及会员的对应福利。
|
||||
</view>
|
||||
<view class="buttonone">
|
||||
<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
|
||||
<uni-icons type="paperplane" size="18" color="#fff"></uni-icons>
|
||||
<view style="margin-left: 0.2rem">授权并获取手机号</view>
|
||||
</button>
|
||||
</view>
|
||||
<view @click="cancel" class="buttontow">取消</view>
|
||||
<view @click="login" class="buttontow">微信</view>
|
||||
<view @click="wx" class="buttontow">支付</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { APIuserLogin } from '@/api/user/index.js';
|
||||
const headPortrait = ref('');
|
||||
const userName = ref(null);
|
||||
const cancel = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
};
|
||||
// 获取用户手机号
|
||||
const onGetPhoneNumber = async (e) => {
|
||||
const { detail } = e;
|
||||
console.log(detail);
|
||||
};
|
||||
// 微信登录
|
||||
const login = async () => {
|
||||
await uni.login({
|
||||
provider: 'weixin',
|
||||
success: function (loginRes) {
|
||||
console.log('获取用户信息', loginRes);
|
||||
headPortrait.value = loginRes.code;
|
||||
userLogin();
|
||||
}
|
||||
});
|
||||
};
|
||||
// 登录获取信息
|
||||
const userLogin = async () => {
|
||||
const res = await APIuserLogin(String(headPortrait.value));
|
||||
console.log(res);
|
||||
uni.setStorage({
|
||||
key: 'storage_token',
|
||||
data: res.data.token,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
}
|
||||
});
|
||||
uni.setStorage({
|
||||
key: 'storage_uid',
|
||||
data: res.data.wxUser.id,
|
||||
success: function () {
|
||||
console.log(1);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 微信支付
|
||||
// const wx = async () => {
|
||||
// // 仅作为示例，非真实参数信息。
|
||||
// uni.requestPayment({
|
||||
// provider: 'wxpay',
|
||||
// timeStamp: String(1718168976),
|
||||
// nonceStr: 'zkm7YLNPxlCGArL05EEO5Lc4uHrp8btH',
|
||||
// package: 'prepay_id=wx1213093640398592aa2114b3f4caf40001',
|
||||
// signType: 'RSA',
|
||||
// paySign:
|
||||
// 'YyTswlJ9WwYEl+aOwXDm1iQORDQPz82zkjBrE0mUkZjHLoOJU8Hg8bdOieHJT/3EQGkQ8ByIYxdMcXei8fSTUpK7C7/ZAd70Rynz3HhXxpPPIZmOhiCcx3mBbLQQx00RhQveC+TFBWt/mBWCFb7RzyfdH6RYAr4bRBya7xnWb7E/YDES6ONOD/JMgjbAnkLmQhBoPH5y4F21VUarVvRj69pDGYJmkpA6JlR92DQbefXVjF1NlP5fFXksdeZzRI04wPGzyMgxsNnGFe4mSuDLb9vhokHgYJvCkGiyco7bsFTHq31grX2ivaZX17JtWtR2aPIc794VGprYcFLDoK3New==',
|
||||
// success: function (res) {
|
||||
// console.log('success:' + JSON.stringify(res));
|
||||
// },
|
||||
// fail: function (err) {
|
||||
// console.log('fail:' + JSON.stringify(err));
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 4rem;
|
||||
.headPortrait {
|
||||
image {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-weight: 700;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.signature {
|
||||
width: 90%;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 2rem;
|
||||
line-height: 1.2rem;
|
||||
color: #9299b0;
|
||||
}
|
||||
.buttonone {
|
||||
margin-top: 2rem;
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22rem;
|
||||
background-color: #00ba26;
|
||||
color: #fff;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
}
|
||||
.buttontow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #00ba26;
|
||||
color: #00ba26;
|
||||
padding: 0.7rem 9.8rem;
|
||||
margin-top: 2.5rem;
|
||||
border-radius: 1.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
pages/my/components/myAddress.vue
Normal file
130
pages/my/components/myAddress.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="card" v-for="(item, index) in data" :key="index">
|
||||
<view class="card-up">
|
||||
<view class="card-up-icon">
|
||||
<uni-icons style="padding: 0.2rem; background-color: #00ba26; border-radius: 50%" type="location-filled" size="20" color="#fff"></uni-icons>
|
||||
<view style="margin-left: 0.3rem">
|
||||
<text style="font-size: 1.1rem; font-weight: 700">{{ item.addressName }}</text>
|
||||
<text style="font-size: 0.9rem">{{ item.addressPhone }}</text>
|
||||
<view>{{ item.address }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-up-iconone">
|
||||
<uni-icons @click="modification(item.id, item.addressName, item.addressPhone, item.address)" fontFamily="DownLoad" type="plusempty" size="20">{{ '\ue6b9' }}</uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-below">
|
||||
<view class="card-below-icon">
|
||||
<uni-icons v-if="iconIndex == 0" type="checkbox-filled" color="#00ba26" size="26"></uni-icons>
|
||||
<uni-icons v-else type="circle" size="26"></uni-icons>
|
||||
<view>默认地址</view>
|
||||
</view>
|
||||
<view @click="del(item.id)" class="card-below-text">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 5rem"></view>
|
||||
<view class="buttom" @click="addsies">新增地址</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { APIGetinquireAddress, APIGetDeleteAddress } from '@/api/site/index.js';
|
||||
// 用户地址
|
||||
const data = ref([]);
|
||||
const iconIndex = ref(0);
|
||||
// 获取地址列表
|
||||
const GetinquireAddress = async () => {
|
||||
const res = await APIGetinquireAddress();
|
||||
data.value = res.data;
|
||||
};
|
||||
// 新增地址
|
||||
const addsies = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/components/addShippingAddress'
|
||||
});
|
||||
};
|
||||
// 修改地址
|
||||
const modification = (id, name, phone, address) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/my/components/addShippingAddress?id=${id}&name=${name}&phone=${phone}&address=${address}`
|
||||
});
|
||||
};
|
||||
//删除地址
|
||||
const del = (id) => {
|
||||
APIGetDeleteAddress(id);
|
||||
uni.showToast({
|
||||
title: '删除成功'
|
||||
});
|
||||
GetinquireAddress();
|
||||
};
|
||||
onShow(() => {
|
||||
GetinquireAddress();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@font-face {
|
||||
font-family: DownLoad;
|
||||
src: url('@/static/icon/iconfont.ttf');
|
||||
}
|
||||
.box {
|
||||
height: 90vh;
|
||||
}
|
||||
.card {
|
||||
width: 92%;
|
||||
margin: 0.5rem auto;
|
||||
background-color: #fff;
|
||||
border-radius: 1.5rem;
|
||||
display: flow-root;
|
||||
.card-up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
border-bottom: 1px solid #b7b7b7;
|
||||
padding-bottom: 1rem;
|
||||
.card-up-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
.card-up-iconone {
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
.card-below {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-left: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.card-below-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.card-below-text {
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
height: 3rem;
|
||||
width: 92%;
|
||||
margin-left: 4%;
|
||||
margin-bottom: 2%;
|
||||
border-radius: 1.5rem;
|
||||
background: #00ba26;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
62
pages/my/components/myOrder.vue
Normal file
62
pages/my/components/myOrder.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="box-up">
|
||||
<view @click="click(index)" v-for="(item, index) in dataList" :key="index" :class="{ active: dataIndex === index }">{{ item.text }}</view>
|
||||
</view>
|
||||
<view class="box-bottom">
|
||||
<view v-if="dataIndex == 0">
|
||||
<!-- 暂无数据 -->
|
||||
<view class="box-bottom-not">
|
||||
<image src="https://i.postimg.cc/SRwWvWDB/image.png" style="height: 25rem; width: 100%"></image>
|
||||
<view class="box-bottom-not-text">暂无订单</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="dataIndex == 1">2</view>
|
||||
<view v-else-if="dataIndex == 2">3</view>
|
||||
<view v-else-if="dataIndex == 3">4</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataIndex = ref(0);
|
||||
const dataList = ref([
|
||||
{
|
||||
text: '全部单'
|
||||
},
|
||||
{
|
||||
text: '待付款'
|
||||
},
|
||||
{
|
||||
text: '待发货'
|
||||
},
|
||||
{
|
||||
text: '待收获'
|
||||
}
|
||||
]);
|
||||
const click = (index) => {
|
||||
dataIndex.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box-up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box-bottom {
|
||||
.box-bottom-not {
|
||||
min-height: 88vh;
|
||||
}
|
||||
.box-bottom-not-text {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #00ba26;
|
||||
}
|
||||
</style>
|
||||
214
pages/my/index.vue
Normal file
214
pages/my/index.vue
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 背景色 -->
|
||||
<view class="background-color">
|
||||
<!-- 登录 -->
|
||||
<view @click="login" class="register">
|
||||
<view class="register-text">您暂未登录,点击下方登录按钮</view>
|
||||
<view class="register-button">登录/注册</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 会员 -->
|
||||
<view class="member">
|
||||
<view class="">图片</view>
|
||||
<view class="member-text">升级会员,订水省钱</view>
|
||||
<view class="member-buttom">立即充值</view>
|
||||
</view>
|
||||
<!-- 我的订单 -->
|
||||
<view class="my-order">
|
||||
<view @click="orders" class="my-order-up">
|
||||
<view>我的订单</view>
|
||||
<view class="my-order-up-left">
|
||||
<view style="display: flex; align-items: center; font-size: 0.9rem; color: #838999">全部订单</view>
|
||||
<view>
|
||||
<uni-icons type="right" size="18"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-order-botton">
|
||||
<view v-for="(item, index) in order" :key="index" class="my-order-botton-box">
|
||||
<uni-icons color="#00ba26" :type="item.icon" size="30"></uni-icons>
|
||||
<view class="">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 更多服务 -->
|
||||
<view @click="services(item.id)" v-for="item in serve" :key="item.id" class="more-services">
|
||||
<view class="more-services-one">
|
||||
<view class="more-services-one-text">
|
||||
<view><uni-icons :type="item.icon" size="26"></uni-icons></view>
|
||||
<view style="margin-left: 1rem">{{ item.text }}</view>
|
||||
</view>
|
||||
<view><uni-icons type="forward" size="26"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const order = ref([
|
||||
{
|
||||
text: '待付款',
|
||||
icon: 'cart-filled'
|
||||
},
|
||||
{
|
||||
text: '待配送',
|
||||
icon: 'cart-filled'
|
||||
},
|
||||
{
|
||||
text: '配送中',
|
||||
icon: 'cart-filled'
|
||||
},
|
||||
{
|
||||
text: '已完成',
|
||||
icon: 'cart-filled'
|
||||
}
|
||||
]);
|
||||
const serve = ref([
|
||||
{
|
||||
text: '我的地址',
|
||||
icon: 'location-filled',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
text: '微信客服',
|
||||
icon: 'weixin',
|
||||
id: 1
|
||||
}
|
||||
]);
|
||||
// 我的订单
|
||||
const orders = () => {
|
||||
console.log(1);
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/components/myOrder'
|
||||
});
|
||||
};
|
||||
//我的登录
|
||||
const login = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/components/login'
|
||||
});
|
||||
};
|
||||
// 跳转
|
||||
const services = (id) => {
|
||||
console.log(serve.value[0].id);
|
||||
if (serve.value[0].id === id) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/components/myAddress'
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 登录
|
||||
.background-color {
|
||||
background-color: #00ba26;
|
||||
height: 8rem;
|
||||
display: flow-root;
|
||||
.register {
|
||||
margin: 3rem auto 0.5rem;
|
||||
width: 92%;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 1rem;
|
||||
padding-bottom: 3rem;
|
||||
.register-text {
|
||||
padding: 1rem 0;
|
||||
color: #6e737d;
|
||||
}
|
||||
.register-button {
|
||||
background-color: #00ba26;
|
||||
width: 10rem;
|
||||
height: 2.5rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 会员
|
||||
.member {
|
||||
width: 83%;
|
||||
margin: 4.8rem auto 0;
|
||||
height: 4.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #000;
|
||||
color: #f0d3a9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
.member-text {
|
||||
margin-left: -2.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.member-buttom {
|
||||
background-color: #f0d3a9;
|
||||
color: #000;
|
||||
font-size: 0.9rem;
|
||||
width: 5rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
//我的订单
|
||||
.my-order {
|
||||
width: 92%;
|
||||
margin: 0.5rem auto 1rem;
|
||||
.my-order-up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
padding: 0.8rem 0.5rem;
|
||||
border-bottom: 1px solid #f0f2f7;
|
||||
.my-order-up-left {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.my-order-botton {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
.my-order-botton-box {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0.2rem 0.8rem;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 更多服务
|
||||
.more-services {
|
||||
background-color: #fff;
|
||||
.more-services-one {
|
||||
width: 86%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
.more-services-one-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.more-services-tow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
pages/order-water/index.vue
Normal file
132
pages/order-water/index.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 定位 -->
|
||||
<view class="location">
|
||||
<view class="location-left">
|
||||
<view><uni-icons type="location" size="20"></uni-icons></view>
|
||||
<view>暂未添加门店或定位未授权</view>
|
||||
</view>
|
||||
<view class="location-right">
|
||||
<view>切换</view>
|
||||
<view><uni-icons type="right" size="20"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 文字 -->
|
||||
<view class="text">*订水之前需要先购买水票，订水后配送师傅会根据订单先后安排配送，为不耽误您的使用还请提前2个小时订水下单</view>
|
||||
<!-- 卡片 -->
|
||||
<view class="card">
|
||||
<view class="card-up">请选择您要订制的产品</view>
|
||||
<view v-for="(item, index) in commodity" :key="index" @click="commoditys(index)" class="card-center">
|
||||
<view class="card-center-up">{{ item.name }}</view>
|
||||
<view class="card-center-botton">
|
||||
<view class="card-center-botton-left">
|
||||
<text style="font-size: 0.5rem">￥</text>
|
||||
<text style="font-size: 1.1rem; color: #ff6b06">{{ item.price }}</text>
|
||||
<del style="margin-left: 0.2rem; font-size: 0.8rem">￥{{ item.retail }}</del>
|
||||
</view>
|
||||
<view :class="{ active: commodityindex === index }" class="card-center-botton-right"><uni-icons color="#fff" type="checkmarkempty" size="20"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-botton">确定选择</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const commodityindex = ref(0);
|
||||
const commodity = ref([
|
||||
{
|
||||
name: '哇哈哈',
|
||||
price: '5.00',
|
||||
retail: '5.00'
|
||||
},
|
||||
{
|
||||
name: '农夫三拳',
|
||||
price: '8.00',
|
||||
retail: '5.00'
|
||||
}
|
||||
]);
|
||||
const commoditys = (index) => {
|
||||
commodityindex.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.location {
|
||||
width: 83%;
|
||||
margin: 0.5rem auto;
|
||||
padding: 0.5rem 0.8rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
.location-left {
|
||||
display: flex;
|
||||
}
|
||||
.location-right {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
color: #7c818b;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.card {
|
||||
text-align: center;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
display: flow-root;
|
||||
.card-up {
|
||||
padding: 0.8rem 0;
|
||||
background-color: #ebedf5;
|
||||
font-size: 0.9rem;
|
||||
color: #878b96;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
.card-center {
|
||||
background-color: #fff;
|
||||
height: 10rem;
|
||||
.card-center-up {
|
||||
padding-top: 0.8rem;
|
||||
display: flex;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.card-center-botton {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.card-center-botton-left {
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.card-center-botton-right {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #7c818b;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.active {
|
||||
background-color: #00ba26;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-botton {
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
margin: 0 1rem 1rem;
|
||||
background-color: #00ba26;
|
||||
border-radius: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
214
pages/shopp/components/commodityDetails.vue
Normal file
214
pages/shopp/components/commodityDetails.vue
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 图片 -->
|
||||
<view class="image">
|
||||
<image src="../../../static/logo.png"></image>
|
||||
</view>
|
||||
<!-- 我的 -->
|
||||
<view class="my">
|
||||
<view class="my-h">{{ data.goodsName }}</view>
|
||||
<view class="my-box">
|
||||
<view class="my-box-textone">
|
||||
<text style="color: #ff9932">￥{{ data.goodsPrice }}.00</text>
|
||||
/个
|
||||
</view>
|
||||
<view class="my-box-texttow">已售0</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选择规格 -->
|
||||
<view class="specification">
|
||||
<view class="specification-h">
|
||||
<view class="specification-h-text">选择规格</view>
|
||||
<view class="specification-h-box">水票组合套餐</view>
|
||||
</view>
|
||||
<view class="specification-button">1(￥1.00)</view>
|
||||
</view>
|
||||
<!-- 商品详情 -->
|
||||
<view class="particulars">
|
||||
<view class="particulars-h">商品详情</view>
|
||||
<view class="particulars-list">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</view>
|
||||
</view>
|
||||
<!-- 加入购物车 -->
|
||||
<view class="navigation">
|
||||
<view class="navigation-box">
|
||||
<view class=""><uni-icons type="contact" size="35"></uni-icons></view>
|
||||
<view class="">首页</view>
|
||||
</view>
|
||||
<view class="navigation-box">
|
||||
<view class=""><uni-icons type="contact" size="35"></uni-icons></view>
|
||||
<view class="">分享</view>
|
||||
</view>
|
||||
<view class="navigation-buttom">
|
||||
<text @click="handleClick('textone')" :class="{ active: selectedButton === 'textone' }" class="navigation-buttom-textone">加入购物车</text>
|
||||
<text @click="handleClick('texttow')" :class="{ active: selectedButton === 'texttow' }" class="navigation-buttom-texttow">立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { APIparticulars } from '@/api/commodity/index.js';
|
||||
|
||||
// 定义状态变量来跟踪哪个按钮被选中
|
||||
const selectedButton = ref('texttow');
|
||||
// 商品详情
|
||||
const data = ref([]);
|
||||
const id = ref();
|
||||
|
||||
// 处理点击事件，切换选中的按钮
|
||||
const handleClick = (buttonType) => {
|
||||
if (buttonType === 'textone') {
|
||||
selectedButton.value = 'textone';
|
||||
} else if (buttonType === 'texttow') {
|
||||
selectedButton.value = 'texttow';
|
||||
uni.navigateTo({
|
||||
url: `/pages/shopp/components/orderForm?name=${data.value.goodsName}&price=${data.value.goodsPrice}`
|
||||
});
|
||||
}
|
||||
};
|
||||
// 获取商品详情列表
|
||||
const particulars = async () => {
|
||||
const res = await APIparticulars(id.value);
|
||||
data.value = res.data;
|
||||
console.log(res);
|
||||
};
|
||||
onLoad((option) => {
|
||||
id.value = option.id;
|
||||
particulars();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
}
|
||||
}
|
||||
.my {
|
||||
width: 92%;
|
||||
margin: 0.8rem auto;
|
||||
background-color: #fff;
|
||||
border-radius: 1rem;
|
||||
display: flow-root;
|
||||
.my-h {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0.8rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.my-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-left: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
.my-box-textone {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.my-box-texttow {
|
||||
margin-right: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
color: #989fbc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.specification {
|
||||
width: 92%;
|
||||
margin: 0 auto 0.8rem;
|
||||
background-color: #fff;
|
||||
display: flow-root;
|
||||
border-radius: 1rem;
|
||||
.specification-h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.specification-h-text {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0.8rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.specification-h-box {
|
||||
font-weight: 700;
|
||||
background-color: #fff0eb;
|
||||
color: #ff9d60;
|
||||
margin-left: 0.4rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
}
|
||||
.specification-button {
|
||||
width: 90%;
|
||||
font-weight: 700;
|
||||
border: 1px solid #e4e6eb;
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
text-align: center;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
}
|
||||
.particulars {
|
||||
width: 92%;
|
||||
margin: 0 auto 5rem;
|
||||
background-color: #fff;
|
||||
border-radius: 1rem;
|
||||
display: flow-root;
|
||||
.particulars-h {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0.8rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.particulars-list {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
padding: 0.8rem 0.8rem;
|
||||
}
|
||||
}
|
||||
.navigation {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
height: 4rem;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.navigation-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.navigation-buttom {
|
||||
background-color: #fff;
|
||||
// border-radius: 1.5rem;
|
||||
.navigation-buttom-textone {
|
||||
font-weight: 700;
|
||||
color: #00ba26;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 1.5rem 0rem 0rem 1.5rem;
|
||||
border: 1px solid #00ba26;
|
||||
border-right: none;
|
||||
}
|
||||
.navigation-buttom-texttow {
|
||||
font-weight: 700;
|
||||
color: #00ba26;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 0rem 1.5rem 1.5rem 0rem;
|
||||
border: 1px solid #00ba26;
|
||||
border-left: none;
|
||||
}
|
||||
.active {
|
||||
background-color: #00ba26;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
pages/shopp/components/orderForm.vue
Normal file
215
pages/shopp/components/orderForm.vue
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 选择收货地址 -->
|
||||
<view class="location">
|
||||
<view class="location-up">
|
||||
<view class="location-left">
|
||||
<view><uni-icons type="location" size="20"></uni-icons></view>
|
||||
<view>请选择收货地址</view>
|
||||
</view>
|
||||
<view class="location-right">
|
||||
<view>切换</view>
|
||||
<view><uni-icons type="right" size="20"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="location-bottom">
|
||||
<view>配送方式</view>
|
||||
<view>送货上门</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品详情 -->
|
||||
<view class="commodity">
|
||||
<view class="commodity-text">
|
||||
<view class="commodity-text-img">
|
||||
<image class="image" src="@/static/logo.png"></image>
|
||||
</view>
|
||||
<view class="commodity-text-text">
|
||||
<view style="font-size: 1.1rem; font-weight: 700; width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ order.orderName }}</view>
|
||||
<view class="commodity-text-price">
|
||||
<view>￥{{ order.orderPrice }}</view>
|
||||
<view>×1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="commodity-freight">
|
||||
<view class="">运费</view>
|
||||
<view class="">免运费</view>
|
||||
</view>
|
||||
<view class="commodity-price">
|
||||
<view class="">商品小计</view>
|
||||
<view class="">￥9899.00</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单 -->
|
||||
<view class="remark">
|
||||
<view style="margin-left: 1rem">备注</view>
|
||||
<input style="margin-left: 0.2rem" type="text" placeholder="请填写备注信息" />
|
||||
</view>
|
||||
<!-- 提交订单 -->
|
||||
<view class="buttom">
|
||||
<view class="buttom-box">
|
||||
<view style="font-size: 0.8rem">
|
||||
实付款:
|
||||
<text style="color: #2b9939">￥</text>
|
||||
<text style="font-size: 1.2rem; color: #2b9939">9899.00</text>
|
||||
</view>
|
||||
<view @click="orderForm" class="buttom-box-bt">提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { APIPostCreateOrder, APIGetpayment } from '@/api/order/index.js';
|
||||
uni.getStorage({
|
||||
key: 'storage_uid',
|
||||
success(res) {
|
||||
order.value.uid = res.data;
|
||||
}
|
||||
});
|
||||
//获取数据
|
||||
const order = ref({
|
||||
orderName: '',
|
||||
orderPrice: '',
|
||||
orderNum: '1',
|
||||
odAddress: '哈尔滨绥化',
|
||||
uid: ''
|
||||
});
|
||||
//生成订单
|
||||
const orderForm = async () => {
|
||||
const res = await APIPostCreateOrder(order.value);
|
||||
Getpayment(res.data.oderNo);
|
||||
};
|
||||
// 支付订单
|
||||
const Getpayment = async (oderNo) => {
|
||||
const res = await APIGetpayment(oderNo);
|
||||
wx(res.data);
|
||||
};
|
||||
// 微信支付
|
||||
const wx = async (data) => {
|
||||
// 仅作为示例，非真实参数信息。
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: String(data.timeStamp),
|
||||
nonceStr: data.nonceStr,
|
||||
package: data.packageValue,
|
||||
signType: 'RSA',
|
||||
paySign: data.paySign,
|
||||
success: function (res) {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
};
|
||||
onLoad((option) => {
|
||||
order.value.orderName = option.name;
|
||||
order.value.orderPrice = option.price;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
height: 90vh;
|
||||
}
|
||||
.location {
|
||||
width: 83%;
|
||||
margin: 0.5rem auto;
|
||||
padding: 0.5rem 0.8rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.location-up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 0.8rem;
|
||||
.location-left {
|
||||
display: flex;
|
||||
}
|
||||
.location-right {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.location-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
.commodity {
|
||||
width: 83%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
.commodity-text {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.commodity-text-img {
|
||||
.image {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.commodity-text-text {
|
||||
margin-left: 0.8rem;
|
||||
.commodity-text-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 2rem;
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.commodity-freight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.commodity-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.remark {
|
||||
width: 92%;
|
||||
background-color: #fff;
|
||||
margin: 0.5rem auto;
|
||||
padding: 0.8rem 0;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.buttom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background-color: #fff;
|
||||
line-height: 4rem;
|
||||
.buttom-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.buttom-box-bt {
|
||||
background-color: #2b9939;
|
||||
color: #fff;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
padding: 0.2rem 1.2rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
147
pages/shopp/index.vue
Normal file
147
pages/shopp/index.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<scroll-view scroll-y class="left-aside">
|
||||
<view v-for="(item, index) in flist" :key="index" class="f-item" :class="{ active: currentId === index }" @click="click(index, item.id)">
|
||||
{{ item.cateName }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y class="right-aside">
|
||||
<view @click="shoppingTrolley(item.id)" v-for="(item, index) in slist" :key="index" class="s-list">
|
||||
<view class="right-aside-box">
|
||||
<view class="right-aside-box-img"><image src="@/static/logo.png"></image></view>
|
||||
<view class="right-aside-box-text">
|
||||
<view>{{ item.goodsName }}</view>
|
||||
<view style="margin-top: 0.2rem; color: #838999">
|
||||
<text style="font-size: 0.8rem">原价:</text>
|
||||
<del style="margin-left: 0.5rem">¥1.00</del>
|
||||
</view>
|
||||
<view style="margin-top: 0.2rem; color: #ff6805">
|
||||
<text style="font-size: 0.8rem">现价:</text>
|
||||
<text style="margin-left: 0.5rem">¥{{ item.goodsPrice }}.00</text>
|
||||
<text>/</text>
|
||||
<text>瓶</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-aside-box-buttom">购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { APIGetcommoditylist, APIAllcategorieslist, APIGetclassifylist } from '@/api/commodity/index.js';
|
||||
const currentId = ref(0);
|
||||
|
||||
// 分类
|
||||
const flist = ref([]);
|
||||
// 商品列表
|
||||
const slist = ref([]);
|
||||
// 点击分类
|
||||
const click = (index, id) => {
|
||||
currentId.value = index;
|
||||
if (index === 0) {
|
||||
Getcommoditylist();
|
||||
} else {
|
||||
Getclassifylist(id);
|
||||
}
|
||||
};
|
||||
//商品详情
|
||||
const shoppingTrolley = (id) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shopp/components/commodityDetails?id=${id}`
|
||||
});
|
||||
};
|
||||
// 获取商品列表
|
||||
const Getcommoditylist = async () => {
|
||||
const res = await APIGetcommoditylist();
|
||||
slist.value = res.data;
|
||||
};
|
||||
// 获取商品分类
|
||||
const Allcategorieslist = async () => {
|
||||
const res = await APIAllcategorieslist();
|
||||
flist.value = res.data;
|
||||
};
|
||||
// 查询分类商品列表
|
||||
const Getclassifylist = async (id) => {
|
||||
const res = await APIGetclassifylist(id);
|
||||
slist.value = res.data;
|
||||
};
|
||||
onMounted(() => {
|
||||
Getcommoditylist();
|
||||
Allcategorieslist();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
height: 88vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
.left-aside {
|
||||
flex-shrink: 0;
|
||||
width: 5rem;
|
||||
height: 88vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
.f-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
position: relative;
|
||||
&.active {
|
||||
color: #00ba26;
|
||||
background: #f8f8f8;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 36rpx;
|
||||
width: 8rpx;
|
||||
background-color: #00ba26;
|
||||
border-radius: 0 4px 4px 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-aside {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-left: 0.8rem;
|
||||
height: 90vh;
|
||||
.right-aside-box {
|
||||
padding-bottom: 1rem;
|
||||
margin: 1rem 0.5rem 0;
|
||||
border-bottom: 1px solid #ebedf5;
|
||||
display: flex;
|
||||
.right-aside-box-img {
|
||||
image {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.right-aside-box-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.right-aside-box-buttom {
|
||||
margin-top: 4.5rem;
|
||||
margin-left: 0.2rem;
|
||||
background-color: #00ba26;
|
||||
color: #fff;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
pages/water-coupon/components/particulars.vue
Normal file
149
pages/water-coupon/components/particulars.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 图片 -->
|
||||
<view class="image">
|
||||
<image src="../../../static/logo.png"></image>
|
||||
</view>
|
||||
<!-- 我的 -->
|
||||
<view class="my">
|
||||
<view class="my-h">我的</view>
|
||||
<view class="my-box">
|
||||
<view class="my-box-textone">
|
||||
<text style="color: #ff9932">￥1.00</text>
|
||||
/个
|
||||
</view>
|
||||
<view class="my-box-texttow">已售0</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选择规格 -->
|
||||
<view class="specification">
|
||||
<view class="specification-h">
|
||||
<view class="specification-h-text">选择规格</view>
|
||||
<view class="specification-h-box">水票组合套餐</view>
|
||||
</view>
|
||||
<view class="specification-button">1(￥1.00)</view>
|
||||
</view>
|
||||
<!-- 加入购物车 -->
|
||||
<view class="navigation">
|
||||
<view class="navigation-box">
|
||||
<view class=""><uni-icons type="contact" size="35"></uni-icons></view>
|
||||
<view class="">首页</view>
|
||||
</view>
|
||||
<view class="navigation-box">
|
||||
<view class=""><uni-icons type="contact" size="35"></uni-icons></view>
|
||||
<view class="">分享</view>
|
||||
</view>
|
||||
<view class="navigation-buttom">
|
||||
<text class="navigation-buttom-texttow">立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
}
|
||||
}
|
||||
.my {
|
||||
width: 92%;
|
||||
margin: 0.8rem auto;
|
||||
background-color: #fff;
|
||||
border-radius: 1rem;
|
||||
display: flow-root;
|
||||
.my-h {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0.8rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.my-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-left: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
.my-box-textone {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.my-box-texttow {
|
||||
margin-right: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
color: #989fbc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.specification {
|
||||
width: 92%;
|
||||
margin: 0 auto 0.8rem;
|
||||
background-color: #fff;
|
||||
display: flow-root;
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 5rem;
|
||||
.specification-h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.specification-h-text {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0.8rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.specification-h-box {
|
||||
font-weight: 700;
|
||||
background-color: #fff0eb;
|
||||
color: #ff9d60;
|
||||
margin-left: 0.4rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
}
|
||||
.specification-button {
|
||||
width: 90%;
|
||||
font-weight: 700;
|
||||
border: 1px solid #e4e6eb;
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
text-align: center;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
height: 4rem;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.navigation-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.navigation-buttom {
|
||||
background-color: #fff;
|
||||
border-radius: 1.5rem;
|
||||
.navigation-buttom-texttow {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background-color: #00ba26;
|
||||
border: 1px solid #00ba26;
|
||||
padding: 0.5rem 2rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
pages/water-coupon/index.vue
Normal file
84
pages/water-coupon/index.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<!-- 水票 -->
|
||||
<view @click="purchase" class="water">
|
||||
<view class="water-left">
|
||||
<view class="water-left-left">
|
||||
<image class="image" src="../../static/logo.png"></image>
|
||||
</view>
|
||||
<view class="water-left-right">
|
||||
<view class="water-left-right-up">测试</view>
|
||||
<view class="water-left-right-centre">
|
||||
<text style="color: #8e8aac; font-size: 0.9rem">活动</text>
|
||||
<text style="color: #ff6600; margin-left: 0.5rem; font-size: 0.9rem">测试</text>
|
||||
</view>
|
||||
<view class="water-left-right-button">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 1.5rem">4.00</text>
|
||||
<text style="color: #8e8aac">/</text>
|
||||
<text style="color: #8e8aac">桶</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="water-right">
|
||||
<view class="water-right-buttom">购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const purchase = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/water-coupon/components/particulars'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.water {
|
||||
width: 83%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
.water-left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.water-left-left {
|
||||
.image {
|
||||
width: 6.5rem;
|
||||
height: 6.5rem;
|
||||
}
|
||||
}
|
||||
.water-left-right {
|
||||
margin-left: 0.8rem;
|
||||
.water-left-right-up {
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.water-left-right-centre {
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
.water-left-right-button {
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.water-right {
|
||||
.water-right-buttom {
|
||||
padding: 0rem 1rem;
|
||||
color: #fff;
|
||||
background-color: #00ba26;
|
||||
height: 2.2rem;
|
||||
line-height: 2.2rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/icon/iconfont.ttf
Normal file
BIN
static/icon/iconfont.ttf
Normal file
Binary file not shown.
BIN
static/logo.png
Normal file
BIN
static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/优惠劵.jpeg
Normal file
BIN
static/优惠劵.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
14
store/index.js
Normal file
14
store/index.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => {
|
||||
return {
|
||||
token: ''
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
userLogin(token) {
|
||||
this.token = token;
|
||||
}
|
||||
}
|
||||
});
|
||||
10
uni.promisify.adaptor.js
Normal file
10
uni.promisify.adaptor.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
|
||||
});
|
||||
},
|
||||
});
|
||||
76
uni.scss
Normal file
76
uni.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color: #333; //基本色
|
||||
$uni-text-color-inverse: #fff; //反色
|
||||
$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable: #c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color: #ffffff;
|
||||
$uni-bg-color-grey: #f8f8f8;
|
||||
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
|
||||
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color: #c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm: 12px;
|
||||
$uni-font-size-base: 14px;
|
||||
$uni-font-size-lg: 16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm: 20px;
|
||||
$uni-img-size-base: 26px;
|
||||
$uni-img-size-lg: 40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2c405a; // 文章标题颜色
|
||||
$uni-font-size-title: 20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle: 26px;
|
||||
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||
$uni-font-size-paragraph: 15px;
|
||||
57
utils/request.js
Normal file
57
utils/request.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
// 导入模块
|
||||
import Request from 'luch-request';
|
||||
// import { userStore } from '@/store/index.js';
|
||||
|
||||
// const user = userStore();
|
||||
|
||||
let refToken = '';
|
||||
uni.getStorage({
|
||||
key: 'storage_token',
|
||||
success(res) {
|
||||
refToken = res.data;
|
||||
}
|
||||
});
|
||||
|
||||
// 实例化网络请求
|
||||
const http = new Request({
|
||||
// 接口基地址
|
||||
baseURL: import.meta.env.VITE_BASE_URL,
|
||||
loading: true
|
||||
});
|
||||
|
||||
//配置请求拦截器
|
||||
http.interceptors.request.use(
|
||||
(config) => {
|
||||
config.header = {
|
||||
token: import.meta.env.VITE_TOKEN || refToken,
|
||||
...config.header
|
||||
};
|
||||
return config;
|
||||
},
|
||||
(responce) => {
|
||||
return Promise.reject(response);
|
||||
}
|
||||
);
|
||||
// 响应拦截器
|
||||
http.interceptors.response.use(
|
||||
function ({ statusCode, data, config }) {
|
||||
// if (config.data.code == 200) {
|
||||
// uni.showLoading();
|
||||
// }
|
||||
// 隐藏加载状态提示;
|
||||
// uni.showLoading();
|
||||
// 解构出响应主体;
|
||||
return data;
|
||||
},
|
||||
function (error) {
|
||||
uni.showLoading();
|
||||
if (error.data.code === 401) {
|
||||
// 关闭提示
|
||||
|
||||
uni.showLoading();
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
// 导出配置好的模网络模块
|
||||
export { http };
|
||||
Loading…
Reference in New Issue
Block a user