优化映入tDesign
This commit is contained in:
parent
296f5e6562
commit
e6ee7505e5
1
app.js
1
app.js
|
|
@ -1,5 +1,6 @@
|
|||
const baseUrl = "http://localhost:8080"
|
||||
|
||||
|
||||
App({
|
||||
onLaunch: function () {
|
||||
console.log("App Launch")
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Page({
|
|||
url: baseUrl + "/user/getById",
|
||||
method: "GET",
|
||||
data: {
|
||||
id: 1,
|
||||
id: 3,
|
||||
},
|
||||
success(res) {
|
||||
self.setData({
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ Page({
|
|||
onLoad: function (options) {
|
||||
const goods = {
|
||||
id: options.id,
|
||||
title: options.title,
|
||||
price: options.price,
|
||||
detail: options.detail,
|
||||
image: decodeURIComponent(options.image).split(','),
|
||||
goodName: options.goodName,
|
||||
goodPrice: options.goodPrice,
|
||||
goodDetail: options.goodDetail,
|
||||
goodImage: decodeURIComponent(options.goodImage).split(','),
|
||||
};
|
||||
this.setData({ goods });
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
{}
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-tag": "tdesign-miniprogram/tag/tag",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<view class="goods-box">
|
||||
<!-- <image src="{{goods.image}}" class="goods-thumb"></image> -->
|
||||
<swiper class="banner" indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
|
||||
<block wx:for="{{goods.goodImage}}" wx:key="{{index}}">
|
||||
<block wx:for="{{goods.goodImage}}" wx:key="index">
|
||||
<swiper-item>
|
||||
<image src="{{item}}" class="slide-image" width="100%" />
|
||||
</swiper-item>
|
||||
|
|
@ -15,22 +15,44 @@
|
|||
</view>
|
||||
</navigator> -->
|
||||
|
||||
<view class="goods-operation">
|
||||
<text class="goods-operation-add" bindtap="reduceCount">-</text>
|
||||
<text class="goods-operation-num">数量 {{num}}</text>
|
||||
<text class="goods-operation-add" bindtap="addCount">+</text>
|
||||
<navigator url="javascript:void(0);" open-type="false">
|
||||
<button class="goods-to-buy" bindtap="onBuyClick">购买</button>
|
||||
<!-- <view class="goods-operation"> -->
|
||||
<view class="goods-info">
|
||||
<view class="left-section">
|
||||
<view class="goods-price">￥ {{goods.goodPrice}}</view>
|
||||
<view class="goods-title">{{goods.goodName}}</view>
|
||||
</view>
|
||||
<view class="right-section">
|
||||
<t-button open-type="share" t-class="shareBtn" variant="text">
|
||||
<view class="btn-icon">
|
||||
<t-icon name="share" size="40rpx" color="#000" />
|
||||
</view>
|
||||
<view class="share-text">分享</view>
|
||||
</t-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-buy">
|
||||
<navigator>
|
||||
<t-icon class="left-return" name="home"></t-icon>
|
||||
<view>首页</view>
|
||||
</navigator>
|
||||
<t-button class="right-buy" theme="light" variant="outline" size="large" shape="round">立即购买</t-button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- <text class="goods-operation-add" bindtap="reduceCount">-</text>
|
||||
<text class="goods-operation-num">数量 {{num}}</text>
|
||||
<text class="goods-operation-add" bindtap="addCount">+</text> -->
|
||||
<!-- <navigator url="javascript:void(0);" open-type="false">
|
||||
<button class="goods-to-buy" bindtap="onBuyClick">购买</button>
|
||||
</navigator> -->
|
||||
<!-- <text class="goods-to-cart" bindtap="addToBuy">购买</text> -->
|
||||
<!-- <image src="/image/cart1.png" class="goods-cart-img" bindtap="addToCart"></image> -->
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<image wx:if="{{show}}" src="/image/cart1.png" class="to-carts-icon"></image>
|
||||
<!-- <view class="goods-stock">{{goods.stock}}</view> -->
|
||||
<view class="goods-title">{{goods.goodName}}</view>
|
||||
<view class="goods-price">￥ {{goods.goodPrice}}</view>
|
||||
</view>
|
||||
<view class="goods-tab-box">
|
||||
<!-- <view class="goods-tab-box">
|
||||
<view class="goods-tab-nav {{curIndex === 0 ?'on':''}}" bindtap="bindTap" data-index="0">商品详情</view>
|
||||
<view class="goods-tab-nav {{curIndex === 1 ?'on':''}}" bindtap="bindTap" data-index="1">产品参数</view>
|
||||
<view class="goods-tab-nav {{curIndex === 2 ?'on':''}}" bindtap="bindTap" data-index="2">售后保障</view>
|
||||
|
|
@ -39,5 +61,5 @@
|
|||
<view wx:if="{{curIndex === 1}}">{{goods.parameter}}</view>
|
||||
<view wx:if="{{curIndex === 2}}">{{goods.service}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
|
@ -3,9 +3,8 @@
|
|||
.goods-box {
|
||||
position: relative;
|
||||
padding: 40rpx 45rpx;
|
||||
text-align: center;
|
||||
color: #454552;
|
||||
border-bottom: 30rpx solid #ededed;
|
||||
/* border-bottom: 30rpx solid #ededed; */
|
||||
}
|
||||
|
||||
.goods-box .goods-thumb {
|
||||
|
|
@ -125,10 +124,13 @@
|
|||
.goods-operation-num {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.banner {
|
||||
height: 240px;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-operation-add {
|
||||
font-weight: bold;
|
||||
width: 80rpx;
|
||||
|
|
@ -156,14 +158,61 @@
|
|||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 40rpx;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.share-text {
|
||||
padding-left: 8rpx;
|
||||
padding-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
.goods-buy {
|
||||
position: fixed; /* 固定在页面底部 */
|
||||
bottom: 0; /* 距离底部为0 */
|
||||
left: 0; /* 左侧对齐 */
|
||||
width: 100%; /* 宽度占满屏幕 */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 20rpx; /* 添加一些内边距 */
|
||||
background-color: #fff; /* 设置背景颜色 */
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加一个阴影 */
|
||||
}
|
||||
|
||||
.left-return {
|
||||
font-size: 32px;
|
||||
flex-grow: 0; /* 防止按钮拉伸 */
|
||||
}
|
||||
|
||||
.right-buy {
|
||||
flex-grow: 0; /* 防止按钮拉伸 */
|
||||
}
|
||||
|
||||
.goods-tab-nav {
|
||||
|
|
|
|||
|
|
@ -6,13 +6,7 @@ Page({
|
|||
autoplay: false,
|
||||
interval: 3000,
|
||||
duration: 800,
|
||||
goods: {
|
||||
id: 1,
|
||||
image: ["/image/beizi1.jpg", "/image/beizi1.jpg"],
|
||||
title: "床上用品六件套",
|
||||
price: 220,
|
||||
detail: "被子、褥子、枕头、三件套",
|
||||
},
|
||||
goods: {},
|
||||
},
|
||||
onLoad() {
|
||||
var self = this
|
||||
|
|
@ -26,7 +20,6 @@ Page({
|
|||
self.setData({
|
||||
goods: res.data.data,
|
||||
})
|
||||
console.log(res, "res", res.data.data)
|
||||
},
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -38,17 +38,16 @@
|
|||
<view class="newest-title"><text>大雄出品</text></view>
|
||||
<view class="newest-box">
|
||||
<view class="newest-list">
|
||||
<navigator url="details/details?id={{goods.id}}&image={{goods.goodImage}}&title={{goods.goodName}}&price={{goods.goodPrice}}&detail={{goods.goodDetail}}">
|
||||
<view class="list">
|
||||
<view class="item" wx:for="{{goods}}" wx:key="id">
|
||||
<navigator url="details/details?id={{item.id}}&goodImage={{item.goodImage}}&goodName={{item.goodName}}&goodPrice={{item.goodPrice}}&goodDetail={{item.goodDetail}}">
|
||||
<view class="list">
|
||||
<image src="{{item.goodImage}}"></image>
|
||||
<view class="newest-text"><text>{{item.goodName}} {{item.goodPrice}}￥</text></view>
|
||||
<view class="newest-text"><text>{{item.goodName}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="newest-text"><text></text></view> -->
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="newest-list">
|
||||
<navigator url="details/details">
|
||||
<image src="/image/s5.png"></image>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ swiper-item image {
|
|||
.newest-box .newest-list{
|
||||
display: inline-block;
|
||||
width: 700rpx;
|
||||
height: 500rpx;
|
||||
height: 470rpx;
|
||||
/* margin:0 0 20rpx 0; */
|
||||
padding-top: 10px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -67,5 +67,6 @@ swiper-item image {
|
|||
margin: 20rpx 0 10rpx;
|
||||
}
|
||||
.newest-box .newest-list .newest-text{
|
||||
color: red;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
|
@ -11,16 +11,7 @@ Page({
|
|||
address: {},
|
||||
hasAddress: false,
|
||||
total: 0,
|
||||
orders: [
|
||||
{
|
||||
id: 1,
|
||||
title: "新鲜芹菜 半斤",
|
||||
image: "/image/s5.png",
|
||||
num: 4,
|
||||
price: 0.01,
|
||||
},
|
||||
// {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03}
|
||||
],
|
||||
orders: [],
|
||||
},
|
||||
onLoad() {
|
||||
var self = this
|
||||
|
|
@ -33,8 +24,9 @@ Page({
|
|||
},
|
||||
success(res) {
|
||||
self.setData({
|
||||
orders: res.data,
|
||||
orders: res.data.data,
|
||||
})
|
||||
console.log('orders',self.data.orders)
|
||||
},
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
|
||||
<view class="orders-box">
|
||||
<view wx:for="{{orders}}" wx:key="index" class="orders-list">
|
||||
<view wx:for="{{orders}}" wx:key="id" class="orders-list">
|
||||
<image class="orders-thumb" src="{{item.image}}"></image>
|
||||
<view class="orders-pro-name">{{item.title}}</view>
|
||||
<view class="orders-pro-price">￥{{item.price}}</view>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"navigationBarTitleText": "订单详情"
|
||||
"navigationBarTitleText": "退款/售后"
|
||||
}
|
||||
|
|
@ -1,85 +1,156 @@
|
|||
const app = getApp()
|
||||
const baseUrl = app.globalData.baseUrl
|
||||
// page/component/new-pages/user/user.js
|
||||
const app = getApp();
|
||||
const baseUrl = app.globalData.baseUrl;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
thumb: "",
|
||||
nickname: "",
|
||||
orders: [],
|
||||
hasAddress: false,
|
||||
address: {},
|
||||
thumb: "", // 用户头像
|
||||
nickname: "", // 用户昵称
|
||||
orders: [], // 订单列表
|
||||
hasAddress: false, // 是否有地址信息
|
||||
address: {}, // 地址信息
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
var self = this
|
||||
wx.getUserProfile({
|
||||
desc: "用于完善会员资料", // 这里必须声明用途
|
||||
success: function (res) {
|
||||
self.setData({
|
||||
thumb: res.userInfo.avatarUrl,
|
||||
nickname: res.userInfo.nickName,
|
||||
})
|
||||
// 你可以将用户信息发送到后端或缓存到本地
|
||||
},
|
||||
fail: function (err) {
|
||||
wx.showToast({
|
||||
title: "用户拒绝了授权",
|
||||
icon: "none",
|
||||
})
|
||||
},
|
||||
})
|
||||
this.checkUserProfile(); // 检查并获取用户信息
|
||||
|
||||
/**
|
||||
* 发起请求获取订单列表信息
|
||||
*/
|
||||
wx.request({
|
||||
url: baseUrl + "/order/loadData",
|
||||
method: "POST",
|
||||
data: {
|
||||
userId: 1,
|
||||
this.loadOrders(); // 加载订单列表
|
||||
},
|
||||
success(res) {
|
||||
self.setData({
|
||||
orders: res.data,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* 检查本地缓存中是否有用户信息
|
||||
*/
|
||||
checkUserProfile() {
|
||||
const userInfo = wx.getStorageSync('userInfo');
|
||||
if (userInfo) {
|
||||
// 如果有用户信息，直接设置数据
|
||||
this.setData({
|
||||
thumb: userInfo.userInfo.avatarUrl,
|
||||
nickname: userInfo.userInfo.nickName,
|
||||
});
|
||||
} else {
|
||||
// 没有用户信息，提示用户登录授权
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '请先登录！',
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.getUserProfile();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
getUserProfile() {
|
||||
var self = this
|
||||
wx.getUserProfile({
|
||||
desc: "用于完善会员资料", // 这里必须声明用途
|
||||
success: function (res) {
|
||||
self.setData({
|
||||
thumb: res.userInfo.avatarUrl,
|
||||
nickname: res.userInfo.nickName,
|
||||
})
|
||||
// 你可以将用户信息发送到后端或缓存到本地
|
||||
success: (userInfo) => {
|
||||
// 存储用户信息到本地缓存中
|
||||
wx.setStorageSync('userInfo', userInfo);
|
||||
|
||||
// 在页面中展示用户信息
|
||||
this.setData({
|
||||
thumb: userInfo.userInfo.avatarUrl,
|
||||
nickname: userInfo.userInfo.nickName,
|
||||
});
|
||||
|
||||
console.log('用户信息', userInfo);
|
||||
},
|
||||
fail: function (err) {
|
||||
fail: (err) => {
|
||||
wx.showToast({
|
||||
title: "用户拒绝了授权",
|
||||
icon: "none",
|
||||
})
|
||||
});
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* 微信登录
|
||||
*/
|
||||
wxLogin() {
|
||||
wx.login({
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
console.log('微信登录成功，code:', res.code);
|
||||
// 可以将code发送到服务器进行登录验证
|
||||
} else {
|
||||
console.log('登录失败！' + res.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 登录到服务器（可选，基于需求）
|
||||
*/
|
||||
loginToServer(code, userInfo) {
|
||||
wx.request({
|
||||
url: `${baseUrl}/login`, // 替换为你的服务器登录接口
|
||||
method: 'POST',
|
||||
data: {
|
||||
code: code, // 微信登录凭证
|
||||
avatar: userInfo.avatarUrl,
|
||||
nickname: userInfo.nickName,
|
||||
gender: userInfo.gender
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 1) {
|
||||
// 登录成功，保存服务器返回的 token
|
||||
wx.setStorageSync('token', res.data.token);
|
||||
// 其他登录后的初始化操作
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('服务器登录失败', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载订单列表
|
||||
*/
|
||||
loadOrders() {
|
||||
wx.request({
|
||||
url: `${baseUrl}/order/loadData`,
|
||||
method: "POST",
|
||||
data: {
|
||||
userId: 1, // 示例用户ID
|
||||
},
|
||||
success: (res) => {
|
||||
this.setData({
|
||||
orders: res.data,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('获取订单失败', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onShow() {
|
||||
var self = this
|
||||
/**
|
||||
* 获取本地缓存 地址信息
|
||||
*/
|
||||
wx.getStorage({
|
||||
key: "address",
|
||||
success: function (res) {
|
||||
self.setData({
|
||||
success: (res) => {
|
||||
this.setData({
|
||||
hasAddress: true,
|
||||
address: res.data,
|
||||
})
|
||||
});
|
||||
},
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 发起支付请求
|
||||
*/
|
||||
|
|
@ -90,16 +161,16 @@ Page({
|
|||
package: "String3",
|
||||
signType: "MD5",
|
||||
paySign: "String4",
|
||||
success: function (res) {
|
||||
console.log(res)
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
},
|
||||
fail: function (res) {
|
||||
fail: (res) => {
|
||||
wx.showModal({
|
||||
title: "支付提示",
|
||||
content: "<text>",
|
||||
showCancel: false,
|
||||
})
|
||||
});
|
||||
},
|
||||
})
|
||||
});
|
||||
},
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
<view class="main">
|
||||
<view class="header" bindtap="getUserProfile">
|
||||
<view wx:if="{{nickname}}">
|
||||
<image src="{{thumb}}" class="thumb"></image>
|
||||
<text class="nickname">{{nickname}}</text>
|
||||
<text class="about">关于我们</text>
|
||||
</view>
|
||||
<view wx:else="">请登录</view>
|
||||
</view>
|
||||
<view class="address-box">
|
||||
<view class="address-manage">
|
||||
<navigator url="/page/component/address/address">地址管理</navigator>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,14 @@
|
|||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"packNpmManually": true,
|
||||
"packNpmRelationList": [
|
||||
{
|
||||
"packageJsonPath": "./package.json",
|
||||
"miniprogramNpmDistDir": "./"
|
||||
}
|
||||
]
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "3.5.5",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
{
|
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"projectname": "wxapp-mall"
|
||||
"projectname": "wxapp-mall",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue