通过微信开发者工具 商城模板 创建新小程序
This commit is contained in:
86
mini-program/pages/goods/comments/create/index.js
Normal file
86
mini-program/pages/goods/comments/create/index.js
Normal file
@@ -0,0 +1,86 @@
|
||||
// import { getCommentDetail } from '../../../../services/good/comments/fetchCommentDetail';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
Page({
|
||||
data: {
|
||||
serviceRateValue: 1,
|
||||
goodRateValue: 1,
|
||||
conveyRateValue: 1,
|
||||
isAnonymous: false,
|
||||
uploadFiles: [],
|
||||
gridConfig: {
|
||||
width: 218,
|
||||
height: 218,
|
||||
column: 3,
|
||||
},
|
||||
isAllowedSubmit: false,
|
||||
imgUrl: '',
|
||||
title: '',
|
||||
goodsDetail: '',
|
||||
imageProps: {
|
||||
mode: 'aspectFit',
|
||||
},
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
imgUrl: options.imgUrl,
|
||||
title: options.title,
|
||||
goodsDetail: options.specs,
|
||||
});
|
||||
},
|
||||
|
||||
onRateChange(e) {
|
||||
const { value } = e?.detail;
|
||||
const item = e?.currentTarget?.dataset?.item;
|
||||
this.setData({ [item]: value }, () => {
|
||||
this.updateButtonStatus();
|
||||
});
|
||||
},
|
||||
|
||||
onAnonymousChange(e) {
|
||||
const status = !!e?.detail?.checked;
|
||||
this.setData({ isAnonymous: status });
|
||||
},
|
||||
|
||||
handleSuccess(e) {
|
||||
const { files } = e.detail;
|
||||
|
||||
this.setData({
|
||||
uploadFiles: files,
|
||||
});
|
||||
},
|
||||
|
||||
handleRemove(e) {
|
||||
const { index } = e.detail;
|
||||
const { uploadFiles } = this.data;
|
||||
uploadFiles.splice(index, 1);
|
||||
this.setData({
|
||||
uploadFiles,
|
||||
});
|
||||
},
|
||||
|
||||
onTextAreaChange(e) {
|
||||
const value = e?.detail?.value;
|
||||
this.textAreaValue = value;
|
||||
this.updateButtonStatus();
|
||||
},
|
||||
|
||||
updateButtonStatus() {
|
||||
const { serviceRateValue, goodRateValue, conveyRateValue, isAllowedSubmit } = this.data;
|
||||
const { textAreaValue } = this;
|
||||
const temp = serviceRateValue && goodRateValue && conveyRateValue && textAreaValue;
|
||||
if (temp !== isAllowedSubmit) this.setData({ isAllowedSubmit: temp });
|
||||
},
|
||||
|
||||
onSubmitBtnClick() {
|
||||
const { isAllowedSubmit } = this.data;
|
||||
if (!isAllowedSubmit) return;
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '评价提交成功',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
wx.navigateBack();
|
||||
},
|
||||
});
|
||||
13
mini-program/pages/goods/comments/create/index.json
Normal file
13
mini-program/pages/goods/comments/create/index.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"navigationBarTitleText": "评价商品",
|
||||
"usingComponents": {
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-rate": "tdesign-miniprogram/rate/rate",
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-upload": "tdesign-miniprogram/upload/upload",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast"
|
||||
}
|
||||
}
|
||||
90
mini-program/pages/goods/comments/create/index.wxml
Normal file
90
mini-program/pages/goods/comments/create/index.wxml
Normal file
@@ -0,0 +1,90 @@
|
||||
<view class="page-container">
|
||||
<view class="comment-card">
|
||||
<view class="goods-info-container">
|
||||
<view class="goods-image-container">
|
||||
<t-image t-class="goods-image" src="{{imgUrl}}" />
|
||||
</view>
|
||||
<view class="goods-title-container">
|
||||
<view class="goods-title">{{title}}</view>
|
||||
<view class="goods-detail">{{goodsDetail}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rate-container">
|
||||
<text class="rate-title">商品评价</text>
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{goodRateValue}}"
|
||||
bind:change="onRateChange"
|
||||
size="26"
|
||||
gap="6"
|
||||
color="{{['#ffc51c', '#ddd']}}"
|
||||
data-item="goodRateValue"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="textarea-container">
|
||||
<t-textarea
|
||||
t-class="textarea"
|
||||
maxlength="{{500}}"
|
||||
indicator
|
||||
placeholder="对商品满意吗？评论一下"
|
||||
bind:change="onTextAreaChange"
|
||||
/>
|
||||
</view>
|
||||
<view class="upload-container">
|
||||
<t-upload
|
||||
media-type="{{['image','video']}}"
|
||||
files="{{uploadFiles}}"
|
||||
bind:remove="handleRemove"
|
||||
bind:success="handleSuccess"
|
||||
gridConfig="{{gridConfig}}"
|
||||
imageProps="{{imageProps}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="anonymous-box">
|
||||
<t-checkbox bind:change="onAnonymousChange" checked="{{isAnonymous}}" color="#FA4126" />
|
||||
<view class="name">匿名评价</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-card convey-card">
|
||||
<view class="convey-comment-title">物流服务评价</view>
|
||||
<view class="rate-container">
|
||||
<text class="rate-title">物流评价</text>
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{conveyRateValue}}"
|
||||
bind:change="onRateChange"
|
||||
variant="filled"
|
||||
size="26"
|
||||
gap="6"
|
||||
color="{{['#ffc51c', '#ddd']}}"
|
||||
data-item="conveyRateValue"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rate-container">
|
||||
<text class="rate-title">服务评价</text>
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{serviceRateValue}}"
|
||||
bind:change="onRateChange"
|
||||
size="26"
|
||||
gap="6"
|
||||
color="{{['#ffc51c', '#ddd']}}"
|
||||
data-item="serviceRateValue"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="submit-button-container">
|
||||
<t-button
|
||||
content="提交"
|
||||
block
|
||||
shape="round"
|
||||
t-class="submit-button{{isAllowedSubmit ? '' : '-disabled'}}"
|
||||
bind:tap="onSubmitBtnClick"
|
||||
/>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
168
mini-program/pages/goods/comments/create/index.wxss
Normal file
168
mini-program/pages/goods/comments/create/index.wxss
Normal file
@@ -0,0 +1,168 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-container .comment-card {
|
||||
padding: 24rpx 32rpx 28rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-image {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-title-container {
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-detail {
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.comment-card .rate-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.comment-card .rate-container .rate-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.comment-card .textarea-container {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.comment-card .textarea-container .textarea {
|
||||
height: 294rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox__bordered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-container .anonymous-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 52rpx;
|
||||
}
|
||||
|
||||
.page-container .anonymous-box .name {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
padding-left: 28rpx;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox {
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-card .convey-comment-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.convey-card {
|
||||
background-color: #ffffff;
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
|
||||
}
|
||||
|
||||
.convey-card .rate-container .rate-title {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox__icon-left {
|
||||
margin-right: 0rpx !important;
|
||||
}
|
||||
|
||||
.submit-button-container {
|
||||
padding: 12rpx 32rpx;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
||||
background-color: #ffffff;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.submit-button-container .submit-button {
|
||||
--td-button-default-color: #fff;
|
||||
--td-button-default-bg-color: #fa4126;
|
||||
--td-button-default-border-color: #fa4126;
|
||||
--td-button-default-active-bg-color: #fa42269c;
|
||||
}
|
||||
|
||||
.submit-button-container .submit-button-disabled {
|
||||
--td-button-default-color: #fff;
|
||||
--td-button-default-bg-color: #ccc;
|
||||
--td-button-default-border-color: #ccc;
|
||||
--td-button-default-active-bg-color: rgba(204, 204, 204, 0.789);
|
||||
}
|
||||
|
||||
.page-container .upload-container {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.page-container .t-upload__wrapper {
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-container .submmit-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 12;
|
||||
padding: 12rpx 32rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background-color: #fff;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.page-container .submmit-bar-button {
|
||||
border-radius: 48rpx !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-container .t-upload__close-btn {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-bottom-left-radius: 8rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.upload-container .upload-addcontent-slot {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user