Merge branch 'master_dev' of http://gitea.lianxianke.cn/qichexitong/car_client_app into master_dev
This commit is contained in:
xiaoshan
19
api/serve/coupons.js
Normal file
19
api/serve/coupons.js
Normal file
@@ -0,0 +1,19 @@
|
||||
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 卡券商品分页列表
|
||||
export function getCardProductListAPI(params) {
|
||||
return request({
|
||||
url: '/api/front/card/product/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 卡券商品详情 /api/front/card/product/info/{id}
|
||||
export function getCardProductInfoAPI(id){
|
||||
return request({
|
||||
url:`/api/front/card/product/info/${id}`,
|
||||
method:'get',
|
||||
})
|
||||
}
|
||||
121
api/serve/repair.js
Normal file
121
api/serve/repair.js
Normal file
@@ -0,0 +1,121 @@
|
||||
|
||||
import request from "@/utils/request.js";
|
||||
|
||||
// 获取门店列表 /api/front/repair/merchant/search/list
|
||||
export function getStoreList(params) {
|
||||
return request({
|
||||
url: '/api/front/repair/merchant/search/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取热门城市 /api/front/hot/city/list/all
|
||||
export function getHotCityAPI() {
|
||||
return request({
|
||||
url: '/api/front/hot/city/list/all',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 轮播图 /api/front/carousel/list
|
||||
export function getCarouselAPI() {
|
||||
return request({
|
||||
url: '/api/front/carousel/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前时间 /api/front/date/get/time
|
||||
export function getTimeAPI() {
|
||||
return request({
|
||||
url: '/api/front/date/get/time',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 预约时间模块 /api/front/date/list
|
||||
export function getDateListAPI(params) {
|
||||
return request({
|
||||
url: '/api/front/date/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取我的汽车 /api/front/car/user/center/getMyCar
|
||||
export function getMyCarAPI() {
|
||||
return request({
|
||||
url: '/api/front/car/user/center/getMyCar',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 预约工单创建 /api/front/car/user/center/reservation/order/create
|
||||
export function reservationCreateAPI(data) {
|
||||
return request({
|
||||
url: '/api/front/car/user/center/reservation/order/create',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 实名详情更具id /api/front/certification/detail/now
|
||||
export function realNameDetaiNowlAPI() {
|
||||
return request({
|
||||
url: '/api/front/certification/detail/now',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 绑定车辆 /api/front/car/user/center/bind
|
||||
export function userBindAPI(data) {
|
||||
return request({
|
||||
url: '/api/front/car/user/center/bind',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户实名添加 /api/front/certification/add
|
||||
export function certificationAPI(data) {
|
||||
return request({
|
||||
url: '/api/front/certification/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 车辆型号分页列表 /api/front/car/model/list
|
||||
export function modelListAPI(params) {
|
||||
return request({
|
||||
url: '/api/front/car/model/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 用户信息 /api/front/user/info
|
||||
export function getMineInfoAPI() {
|
||||
return request({
|
||||
url: '/api/front/user/info',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 用户完整信息 /api/front/user/user/info
|
||||
export function getAllMineInfoAPI() {
|
||||
return request({
|
||||
url: '/api/front/user/user/info',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 更具车牌号查询车辆详情 /api/front/car/user/center/getInfo
|
||||
export function getCarInfoAPI() {
|
||||
return request({
|
||||
url: '/api/front/car/user/center/getInfo',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
|
||||
import request from "@/utils/request.js";
|
||||
|
||||
/**
|
||||
* 获取门店列表
|
||||
*
|
||||
*/
|
||||
export function getStoreList(params) {
|
||||
return request.get('repair/merchant/search/list', params, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取热门城市 /api/front/hot/city/list/all
|
||||
*/
|
||||
export const getHotCityAPI = () => request.get('hot/city/list/all')
|
||||
|
||||
/**
|
||||
* 轮播图 /api/front/carousel/list
|
||||
*/
|
||||
export const getCarouselAPI = () => request.get('carousel/list')
|
||||
|
||||
/**
|
||||
* 获取当前时间 /api/front/date/get/time
|
||||
*/
|
||||
export const getTimeAPI = () => request.get('date/get/time')
|
||||
|
||||
/**
|
||||
* 预约时间模块 /api/front/date/list
|
||||
*/
|
||||
export const getDateListAPI = (params) => request.get('date/list',params,{noAuth: true})
|
||||
|
||||
/**
|
||||
* 获取我的汽车 /api/front/car/user/center/getMyCar
|
||||
*/
|
||||
export const getMyCarAPI = () => request.get('car/user/center/getMyCar',{noAuth: true})
|
||||
|
||||
/**
|
||||
* 预约工单创建 /api/front/car/user/center/reservation/order/create
|
||||
*/
|
||||
export const reservationCreateAPI = (data) => request.post('car/user/center/reservation/order/create',data)
|
||||
|
||||
/*
|
||||
* 实名详情更具id /api/front/certification/detail/now
|
||||
*/
|
||||
export const realNameDetaiNowlAPI = () => request.get(`certification/detail/now`)
|
||||
|
||||
/**
|
||||
* 绑定车辆 /api/front/car/user/center/bind
|
||||
*/
|
||||
export const userBindAPI=(data)=>request.post('car/user/center/bind', data);
|
||||
|
||||
/**
|
||||
* 用户实名添加 /api/front/certification/add
|
||||
*/
|
||||
export const certificationAPI=(data)=>request.post('certification/add', data);
|
||||
|
||||
/**
|
||||
* 车辆型号分页列表 /api/front/car/model/list
|
||||
*/
|
||||
export const modelListAPI = (params) => request.get('car/model/list', params,{noAuth: true})
|
||||
|
||||
/**
|
||||
* 用户信息 /api/front/user/info
|
||||
*/
|
||||
export const getMineInfoAPI = () => request.get('user/info')
|
||||
|
||||
/**
|
||||
* 用户完整信息 /api/front/user/user/info
|
||||
*/
|
||||
export const getAllMineInfoAPI = () => request.get('user/user/info')
|
||||
|
||||
/**
|
||||
* 更具车牌号查询车辆详情 /api/front/car/user/center/getInfo
|
||||
*/
|
||||
export const getCarInfoAPI=(params)=>request.get('car/user/center/getInfo', params,{noAuth: true})
|
||||
110
components/payment-type.vue
Normal file
110
components/payment-type.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup :show="paymentShow" @close="topUpTypeClose" round="16" closeOnClickOverlay>
|
||||
<view class="top-up-popup">
|
||||
<view class="top-up-popup-title">选择支付方式</view>
|
||||
<view>
|
||||
<view class="top-up-popup-type f-jcsb f-a-i">
|
||||
<view class="f-a-i">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image :src="`${config.aliyunOssUrl}/static/images/app/mine/ye.png`" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image src="@/static/images/app/mine/ye.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<view class="top-up-popup-type-wx">余额支付</view>
|
||||
</view>
|
||||
<view class="f-a-i" @click="actTypeFn('ye')">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image v-if="topUpType=='ye'" :src="`${config.aliyunOssUrl}/static/images/app/mine/act.png`"
|
||||
mode=""></image>
|
||||
<image v-else :src="`${config.aliyunOssUrl}/static/images/app/mine/act_no.png`" mode="">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image v-if="topUpType=='ye'" src="@/static/images/app/mine/act.png" mode=""></image>
|
||||
<image v-else src="@/static/images/app/mine/act_no.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-up-popup-type f-jcsb f-a-i">
|
||||
<view class="f-a-i">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image :src="`${config.aliyunOssUrl}/static/images/app/mine/wx.png`" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image src="@/static/images/app/mine/wx.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<view class="top-up-popup-type-wx">微信支付</view>
|
||||
</view>
|
||||
<view class="f-a-i" @click="actTypeFn('wx')">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image v-if="topUpType=='wx'" :src="`${config.aliyunOssUrl}/static/images/app/mine/act.png`"
|
||||
mode=""></image>
|
||||
<image v-else :src="`${config.aliyunOssUrl}/static/images/app/mine/act_no.png`" mode="">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image v-if="topUpType=='wx'" src="@/static/images/app/mine/act.png" mode=""></image>
|
||||
<image v-else src="@/static/images/app/mine/act_no.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-up-popup-type f-jcsb f-a-i">
|
||||
<view class="f-a-i">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image :src="`${config.aliyunOssUrl}/static/images/app/mine/zfb.png`" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image src="@/static/images/app/mine/zfb.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<view class="top-up-popup-type-zfb">支付宝</view>
|
||||
</view>
|
||||
<view class="f-a-i" @click="actTypeFn('zfb')">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image v-if="topUpType=='zfb'"
|
||||
:src="`${config.aliyunOssUrl}/static/images/app/mine/act.png`" mode=""></image>
|
||||
<image v-else :src="`${config.aliyunOssUrl}/static/images/app/mine/act_no.png`" mode="">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image v-if="topUpType=='zfb'" src="@/static/images/app/mine/act.png" mode=""></image>
|
||||
<image v-else src="@/static/images/app/mine/act_no.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-up-popup-button">
|
||||
<u-button color="#13AFA8" shape="circle"
|
||||
:customStyle="{height: '84rpx', lineHeight: '84rpx',marginTop: '48rpx'}"
|
||||
@click="submitPayment">立即支付</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "payment-type",
|
||||
props: ['paymentShow', "submitPayment", 'topUpTypeClose', ],
|
||||
data() {
|
||||
return {
|
||||
// paymentShow:false,
|
||||
topUpType: 'wx'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//付款类型
|
||||
actTypeFn(type) {
|
||||
this.topUpType = type
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -33,7 +33,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { carShopList } from '@/data/tabbar'
|
||||
// import { carShopList } from '@/data/tabbar'
|
||||
export default {
|
||||
name:"tabbar-carshop",
|
||||
props: {
|
||||
|
||||
45
pages.json
45
pages.json
@@ -241,7 +241,7 @@
|
||||
}, {
|
||||
"path": "pages/mine/wallet/withdrawDeposit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "体现"
|
||||
"navigationBarTitleText": "提现"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -479,6 +479,49 @@
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/welfare/rightsInterests/confirm_order",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "确认订单",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/welfare/payment_state/payment_state",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "支付结果",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/message/message",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "消息",
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/message/message_Chat/message_Chat",
|
||||
"name": "message_Chat",
|
||||
"Login": true,
|
||||
"style": {
|
||||
"navigationBarTitleText": "加载中...",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"softinputmode": "adjustResize",
|
||||
"titleNView": {
|
||||
"buttons": [{
|
||||
"type": "menu"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
||||
98
pages/message/message-list.vue
Normal file
98
pages/message/message-list.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<!-- 系统消息页 -->
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view scroll-y>
|
||||
<view class="list flex-column align-center">
|
||||
<view class="item" v-for="(item,index) in messageList" :key="index">
|
||||
<view class="time text-center f-24 c666">
|
||||
{{item.time}}
|
||||
</view>
|
||||
<view class="content-box" :style="index%2 && 'background: #F1F1F1'">
|
||||
<view class="title f-32 c111">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="content">
|
||||
<u-parse :content="item.content"></u-parse>
|
||||
</view>
|
||||
<view class="bottom-box flex align-center justify-between" @click="link(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)">
|
||||
<view class="f-28 c111">
|
||||
点击查看全文
|
||||
</view>
|
||||
<image src="@/static/images/icon/arrow-right.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messageList: [
|
||||
{
|
||||
time: '10-19 12:34',
|
||||
title: '恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!',
|
||||
content: `<h3>恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!</h3><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" /><p>露从今夜白，月是故乡明</p>`
|
||||
},{
|
||||
time: '10-19 12:34',
|
||||
title: '恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!',
|
||||
content: `<h3>恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!</h3><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" /><p>露从今夜白，月是故乡明</p>`
|
||||
},{
|
||||
time: '10-19 12:34',
|
||||
title: '恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!',
|
||||
content: `<h3>恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!</h3><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" /><p>露从今夜白，月是故乡明</p>`
|
||||
},{
|
||||
time: '10-19 12:34',
|
||||
title: '恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!',
|
||||
content: `<h3>恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆!</h3><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" /><p>露从今夜白，月是故乡明</p>`
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
link(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
.time {
|
||||
line-height: 72rpx;
|
||||
}
|
||||
.content-box {
|
||||
padding: 32rpx;
|
||||
width: 702rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
.title {
|
||||
|
||||
}
|
||||
.content {
|
||||
|
||||
}
|
||||
.bottom-box {
|
||||
margin-top: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid #ededed;
|
||||
line-height: 40rpx;
|
||||
image {
|
||||
width: 10rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
206
pages/message/message.vue
Normal file
206
pages/message/message.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList" created-reload :show-refresher-when-reload="false"
|
||||
:auto-clean-list-when-reload="false" hide-empty-view :pagingStyle="{'background-color':'#fff'}">
|
||||
<!-- 搜索框 -->
|
||||
<view slot="top">
|
||||
<u-navbar leftText="返回" title="个人中心" placeholder :safeAreaInsetTop="true">
|
||||
<view class="u-nav-slot" slot="left">
|
||||
<u-icon name="arrow-left" size="19"></u-icon>
|
||||
</view>
|
||||
<view class="u-nav-slot" slot="right">
|
||||
<u-icon name="trash" size="19"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view>
|
||||
<!-- 消息组 -->
|
||||
<u-cell-group>
|
||||
<view v-for="(item,index) in groupList" :key="index">
|
||||
<u-cell :border="false" isLink @click="$u.route(item.url)">
|
||||
<view slot="icon">
|
||||
<u--image :src="item.img" width="92rpx" height="92rpx" />
|
||||
</view>
|
||||
<u--text slot="title" :text="item.text" color="#222" size="15" margin="0 24rpx" bold />
|
||||
<view slot="value">
|
||||
<u-badge max="99" :value="unReadObj[item.type]" />
|
||||
</view>
|
||||
</u-cell>
|
||||
<view style="width: 610rpx;height: 2rpx;border-top: 2rpx solid #e5e5e5;margin-left: auto;" />
|
||||
</view>
|
||||
|
||||
</u-cell-group>
|
||||
<!-- 消息列表 -->
|
||||
<u-list height="auto">
|
||||
<u-swipe-action>
|
||||
<u-list-item v-for="(item,index) in dataList" :key="item.id">
|
||||
<u-swipe-action-item :options="options2" :name="index" :index="item.id" @click="swipeAction">
|
||||
<u-cell :border="false"
|
||||
@click="Navto('/pages/carShop/message/message_Chat/message_Chat',item,index)">
|
||||
<view slot="icon">
|
||||
<u--image :src="item.toUidAvatar" shape="circle" width="92rpx" height="92rpx" />
|
||||
</view>
|
||||
<u--text slot="title" :text="item.toUidNickname" color="#222" size="15" margin="0 24rpx"
|
||||
bold />
|
||||
<u--text slot="label" :text="content(item.content)" color="#888" size="12"
|
||||
margin="16rpx 24rpx" lines="1" />
|
||||
<view slot="value">
|
||||
<u-badge max="99" :value="item.unReadCount||0" />
|
||||
</view>
|
||||
</u-cell>
|
||||
<view
|
||||
style="width: 610rpx;height: 2rpx;border-top: 2rpx solid #e5e5e5;margin-left: auto;" />
|
||||
</u-swipe-action-item>
|
||||
</u-list-item>
|
||||
</u-swipe-action>
|
||||
</u-list>
|
||||
</view>
|
||||
<tabbar-carshop current="/pages/carShop/message/message"></tabbar-carshop>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbarCarshop from '@/components/tabbar-carshop/tabbar-carshop.vue'
|
||||
|
||||
// import {
|
||||
// getChatList,
|
||||
// deletedMgs,
|
||||
// userCenterGetUnRead,
|
||||
// SendMmsg
|
||||
// } from '@/api/carShop/message/index.js';
|
||||
export default {
|
||||
components: {
|
||||
tabbarCarshop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
unReadObj: {},
|
||||
options2: [{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#f56c6c',
|
||||
height: '154rpx'
|
||||
}
|
||||
}],
|
||||
groupList: [{
|
||||
text: '系统消息',
|
||||
img: 'https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/c55cf620899f494e9f4ba7542d0a4ac5.png',
|
||||
url: '/pages/repair/repair/message/message-list',
|
||||
type: 'systemArticleUnReadNum'
|
||||
},
|
||||
// {
|
||||
// text: '评论',
|
||||
// url: '/pages/message/messages_comment/messages_comment',
|
||||
// type: 'replyUnReadNum'
|
||||
// },
|
||||
// {
|
||||
// text: '收到的赞',
|
||||
// url: '/pages/message/messages_Like/messages_Like',
|
||||
// type: 'likeUnReadNum'
|
||||
// },
|
||||
// {
|
||||
// text:'群聊',
|
||||
// url:'/pages/message/message_Group/message_Group',
|
||||
// type: 'GroupUnReadNum'
|
||||
// }
|
||||
],
|
||||
navConfig: {
|
||||
title: "消息",
|
||||
hideback: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.$on('Chat', (e) => {
|
||||
if (e.type == 'add') {
|
||||
this.unReadObj = e.data;
|
||||
if (this.$refs.paging) {
|
||||
this.$refs.paging.clear();
|
||||
this.$refs.paging.refresh();
|
||||
}
|
||||
} else if (e.type == 'remove') {
|
||||
//私聊未读清0，其他消息清0有服务端处理
|
||||
if (e.index) this.dataList[e.index].unReadCount = 0;
|
||||
}
|
||||
});
|
||||
//发起聊天
|
||||
// SendMmsg({
|
||||
// "chatType": 81,
|
||||
// "content": "小宏乖乖",
|
||||
// "msgType": 78,
|
||||
// "toUid": 9
|
||||
// }).then(res => {
|
||||
// console.log(res, '聊天');
|
||||
// })
|
||||
},
|
||||
onShow() {
|
||||
// #ifdef APP-PLUS
|
||||
// if(uni.$tim.TimLogin){
|
||||
// if(this.groupList.some(item=>item.text == '群聊')) return false;
|
||||
// this.groupList.push({
|
||||
// text:'群聊',
|
||||
// url:'/pages/message/message_Group/message_Group',
|
||||
// type: 'GroupUnReadNum'
|
||||
// });
|
||||
// }
|
||||
// #endif
|
||||
if (this.$refs.paging) {
|
||||
this.$refs.paging.refresh();
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off('Chat');
|
||||
},
|
||||
computed: {
|
||||
content() {
|
||||
return (val) => {
|
||||
if (val.indexOf("{") != -1) return "一起分享";
|
||||
else return val;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//初始化
|
||||
queryList(pageNo, pageSize) {
|
||||
getChatList({
|
||||
page: pageNo,
|
||||
limit: pageSize
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
},
|
||||
//删除信息
|
||||
swipeAction({
|
||||
name
|
||||
}) {
|
||||
this.$u.throttle(() => {
|
||||
deletedMgs({
|
||||
id: this.dataList[name].id
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.dataList.splice(name, 1);
|
||||
this.$u.toast('删除成功');
|
||||
} else {
|
||||
this.$u.toast('删除失败');
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
//跳转
|
||||
Navto(url, item, i) {
|
||||
this.$u.route(url, {
|
||||
charSn: JSON.stringify(encodeURIComponent(item.chatSn)),
|
||||
chatType: item.chatType,
|
||||
toUid: item.toUid,
|
||||
toUidNickname: item.toUidNickname,
|
||||
index: i
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {}
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="chat-input-bar">
|
||||
<view class="chat-input-container">
|
||||
<view class="u-flex u-flex-items-center" style="background-color: #FFFFFF;">
|
||||
<!-- 输入框 -->
|
||||
<view style="flex: 1;position: relative;overflow: hidden;" @click.stop="openPinglun">
|
||||
<u--textarea autoHeight fixed :showConfirmBar="false" border="none" confirmHold
|
||||
:autoFocus="autoFocus" :placeholder="placeholder" maxlength="100" :disabled="disabled"
|
||||
:cursor-spacing="20" v-model="value" :focus="focus" @blur="blur"
|
||||
@focus="emojiShow=false,more=false" @linechange="linechange"
|
||||
:customStyle="'background-color: #f2f0f4; border-radius: '+ borderRadius +'rpx;'" />
|
||||
<view style="position: absolute;left: 0;top: 0;flex: 1;" @click="openPinglun" v-if="open" />
|
||||
</view>
|
||||
|
||||
<!--表情按钮 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="emojiShow = !emojiShow,more=false,blur()">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/expression.png"
|
||||
style="width: 48rpx;height: 48rpx;" />
|
||||
</view>
|
||||
<!-- 更多按钮 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="more = !more,emojiShow=false,blur()">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/more.png"
|
||||
style="width: 48rpx;height: 48rpx;" />
|
||||
</view>
|
||||
<!--发送按钮 -->
|
||||
<view v-if="value!==''" style="margin-left: 20rpx;" @click.stop="sendSMS(value,0)">
|
||||
<image src="https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/63571017a4a042b682e1c6be08a3cdda.png"
|
||||
style="width: 48rpx;height: 48rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 功能 -->
|
||||
<template v-if="more">
|
||||
<u-grid col="4" :border="false" @click="gridItemTap" customStyle="background-color: #fff;" ref="grid">
|
||||
<u-grid-item v-for="(item,index) in gridItem" :key="index" customStyle="margin-bottom: 10rpx;">
|
||||
<u--image :src="item.img" width="52" height="52" />
|
||||
<view style="margin-top: 10rpx;">
|
||||
<u--text :text="item.text" color="#999" size="24rpx" align="center" />
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</template>
|
||||
<!-- 表情 -->
|
||||
<template v-else-if="emojiShow">
|
||||
<view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<waterfall column-count="8" column-width="auto" column-gap="0" left-gap="10"
|
||||
style="height: 200rpx;background-color: #fff;">
|
||||
<cell v-for="(item,index) in emoicon" :key="index" style="padding: 10rpx;" @click="value += item">
|
||||
<text style="font-size: 36rpx;">{{item}}</text>
|
||||
</cell>
|
||||
</waterfall>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<u-list height="200rpx" customStyle="background-color:#fff;padding:10rpx 0;">
|
||||
<u-grid col="10">
|
||||
<u-grid-item v-for="(item,index) in emoicon" :key="index" @click="value += item"
|
||||
customStyle="margin-bottom:20rpx;">
|
||||
<u-list-item>
|
||||
<text style="font-size: 36rpx;text-align: left;">{{item}}</text>
|
||||
</u-list-item>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</u-list>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/util.js";
|
||||
export default {
|
||||
name: "chat-input-bar",
|
||||
props: {
|
||||
groupID: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
borderRadius: 50, //评论框圆角大小
|
||||
emojiShow: false, //表情显示
|
||||
autoFocus: false, //自动焦点
|
||||
focus: false,
|
||||
disabled: false,
|
||||
open: true,
|
||||
more: false,
|
||||
placeholder: "发送信息~",
|
||||
emoicon: [
|
||||
"😁", "😋", "😜", "😉", "😌", "😅", "😳", "😊", "😝", "😰", "😠", "😩", "😲", "😞", "😭", "😍",
|
||||
"😖", "😱", "😡", "😚", "😤", "🐼", "🐲", "😺", "😸", "😹", "😽", "🙀", "🐴", "🐮", "🍺", "🔥",
|
||||
"💔", "🉑", "💢", "💣", "💩", "💪", "👍", "👊", "👋", "👌", "👐"
|
||||
],
|
||||
gridItem: [{
|
||||
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/album.png',
|
||||
text: '相册'
|
||||
},
|
||||
{
|
||||
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/video.png',
|
||||
text: '视频'
|
||||
},
|
||||
|
||||
{
|
||||
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/phone.png',
|
||||
text: '语音通话'
|
||||
},
|
||||
{
|
||||
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/video.png',
|
||||
text: '视频通话'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//发送
|
||||
sendSMS(value, type) {
|
||||
if (!value) return uni.$u.toast('内容不能为空');
|
||||
this.$emit('sendSMS', {
|
||||
msg: value,
|
||||
msgType: type
|
||||
});
|
||||
this.value = '';
|
||||
},
|
||||
//点击更多事件
|
||||
gridItemTap(index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
// 从相册选择图片
|
||||
utils.uploadImageOne({
|
||||
count: 1,
|
||||
sizeType: ['original'],
|
||||
sourceType: ['album', 'camera'],
|
||||
dir: 'crmebimage/public/product/'
|
||||
}, null, (res) => {
|
||||
uni.hideLoading();
|
||||
this.sendSMS(res.data, 1);
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 从相册选择视频
|
||||
utils.uploadVideo({
|
||||
dir: 'crmebimage/public/product/'
|
||||
}, null, true, res => {
|
||||
uni.hideLoading();
|
||||
this.sendSMS(res.data, 2);
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
//语音通话
|
||||
this.$emit('TUICallKit', 1);
|
||||
break;
|
||||
case 3:
|
||||
//语音通话
|
||||
this.$emit('TUICallKit', 2);
|
||||
break;
|
||||
}
|
||||
},
|
||||
//输入框行数变化时
|
||||
linechange({
|
||||
detail
|
||||
}) {
|
||||
if (Math.abs(detail.height) < 26) {
|
||||
this.borderRadius = 50
|
||||
} else {
|
||||
this.borderRadius = 10
|
||||
}
|
||||
},
|
||||
//打开输入框
|
||||
openPinglun() {
|
||||
this.emojiShow = false;
|
||||
this.more = false;
|
||||
// #ifndef APP-PLUS
|
||||
this.open = false;
|
||||
uni.$u.debounce(() => {
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
if (plus.os.name == "iOS") {
|
||||
this.open = false;
|
||||
this.disabled = false;
|
||||
uni.$u.debounce(() => {
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
} else {
|
||||
this.focus = true;
|
||||
this.$nextTick(() => {
|
||||
this.open = false;
|
||||
if (!this.open) {
|
||||
plus.key.showSoftKeybord();
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
//失去焦点
|
||||
blur() {
|
||||
// #ifdef APP-PLUS
|
||||
if (plus.os.name == "iOS") {
|
||||
this.disabled = true;
|
||||
this.autoFocus = false;
|
||||
}
|
||||
this.open = true;
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.open = true;
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-input-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-top: solid 1px #f5f5f5;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 15rpx;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
219
pages/message/message_Chat/components/chat-item/chat-item.nvue
Normal file
219
pages/message/message_Chat/components/chat-item/chat-item.nvue
Normal file
@@ -0,0 +1,219 @@
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view class="chat-item">
|
||||
<text class="chat-time" v-if="item.chatTime&&item.chatTime.length">
|
||||
{{item.chatTime}}
|
||||
</text>
|
||||
<view :class="{'chat-container':true,'chat-location-me':item.selfStatus}">
|
||||
<view class="chat-icon-container">
|
||||
<image class="chat-icon" :src="item.avatar" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="chat-content-container">
|
||||
<text :class="{'chat-user-name':true,'chat-location-me':item.selfStatus}">
|
||||
{{item.nickname}}
|
||||
</text>
|
||||
<template v-if="item.msgType ===0">
|
||||
<view :class="{'chat-text-container':true,'chat-text-container-me':item.selfStatus}">
|
||||
<text :class="{'char-text':true,'char-text-me':item.selfStatus}"
|
||||
:style="'font-size:30rpx;color:'+(item.selfStatus?'#fff;':'#333;')" >{{item.content}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===1">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
@click.stop="previewImage(item.content)">
|
||||
<image :src="item.content" mode="aspectFill" style="width: 170rpx;height: 262rpx;border-radius: 16rpx;"/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===2">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;">
|
||||
<image @click.stop="videoPlay(item.content)"
|
||||
:src="item.content+'?x-oss-process=video/snapshot,t_1000,m_fast'"
|
||||
mode="aspectFill"
|
||||
style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}" @click.stop="videoPlay(item.content)">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===4">
|
||||
<view
|
||||
:class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
style="position: relative;"
|
||||
@click="Navto({url:'/pages/goods/goods_details/index',type:'redirectTo',params:{id:goodsDetai(item.content).id}})">
|
||||
<image mode="aspectFill" :src="goodsDetai(item.content).image" style="width: 170rpx;height: 262rpx;border-radius: 16rpx;"/>
|
||||
<view :class="{'chat-share-container-me':item.selfStatus,'chat-share-container':true}">
|
||||
<u--text :text="goodsDetai(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===5">
|
||||
<view
|
||||
:class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
style="position: relative;"
|
||||
@click.stop="Navto({url:'/pages/discover/discover_video/index',type:'redirectTo',params:{noteId:discoverVideo(item.content).id}})">
|
||||
<image mode="aspectFill"
|
||||
:src="discoverVideo(item.content).image" style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
<view :class="{'chat-share-container-me':item.selfStatus,'chat-share-container':true}">
|
||||
<u--text :text="discoverVideo(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"chat-item",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default(){
|
||||
return {
|
||||
chatTime: '',
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
content: '',
|
||||
selfStatus: false
|
||||
}
|
||||
}
|
||||
},
|
||||
index:0
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
//商品详情
|
||||
goodsDetai(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
},
|
||||
//短视频详情
|
||||
discoverVideo(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
previewImage(img){
|
||||
uni.previewImage({
|
||||
urls:[img],
|
||||
current:0
|
||||
});
|
||||
},
|
||||
//播放视频
|
||||
videoPlay(e){
|
||||
this.$emit('videoPlay',e)
|
||||
},
|
||||
//跳转
|
||||
Navto(url){uni.$u.route(url)},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.chat-time{
|
||||
padding: 24rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
.chat-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-video-container{
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin-left: 50rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-video-container-me{
|
||||
right: 50rpx;
|
||||
margin-left: 0;
|
||||
}
|
||||
.chat-text-container-me-border-radius{
|
||||
border-radius:16rpx 0 16rpx 16rpx;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-text-container-border-radius{
|
||||
border-radius:0 16rpx 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-share-container{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 170rpx;
|
||||
padding: 8rpx 4rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
.chat-share-container-me{
|
||||
right: 0;
|
||||
}
|
||||
.chat-location-me{
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
.chat-icon-container{
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.chat-icon{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
.chat-content-container{
|
||||
margin: 0rpx 15rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.chat-user-name{
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
}
|
||||
.chat-text-container{
|
||||
margin-top: 10rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.chat-text-container-me{
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.char-text{
|
||||
border-radius: 8rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.char-text-me{
|
||||
background-color: #FF404B;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
210
pages/message/message_Chat/components/chat-item/chat-item.vue
Normal file
210
pages/message/message_Chat/components/chat-item/chat-item.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view class="chat-item">
|
||||
<text class="chat-time" v-if="item.chatTime&&item.chatTime.length">
|
||||
{{item.chatTime}}
|
||||
</text>
|
||||
<view :class="{'chat-container':true,'chat-location-me':item.selfStatus}">
|
||||
<view class="chat-icon-container">
|
||||
<image class="chat-icon" :src="item.avatar" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="chat-content-container">
|
||||
<text :class="{'chat-user-name':true,'chat-location-me':item.selfStatus}">
|
||||
{{item.nickname}}
|
||||
</text>
|
||||
<template v-if="item.msgType ===0">
|
||||
<view :class="{'chat-text-container':true,'chat-text-container-me':item.selfStatus}">
|
||||
<text :class="{'char-text':true,'char-text-me':item.selfStatus}"
|
||||
:style="'font-size:30rpx;color:'+(item.selfStatus?'#000;':'#333;')" >{{item.content}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===1">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
@click.stop="previewImage(item.content)">
|
||||
<u--image :src="item.content" width="85" height="131"/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===2">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;">
|
||||
<image @click.stop="videoPlay(item.content)"
|
||||
:src="item.content+'?x-oss-process=video/snapshot,t_1000,m_fast'" style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}" @click.stop="videoPlay(item.content)">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===4">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;"
|
||||
@click="Navto({url:'/pages/goods/goods_details/index',type:'redirectTo',params:{id:goodsDetai(item.content).id}})">
|
||||
<u--image :src="goodsDetai(item.content).image" width="85" height="131"/>
|
||||
<view style="position: absolute;bottom: 0;left: 0;padding: 8rpx 4rpx;background-color: rgba(0, 0, 0, 0.5);border-radius: 14rpx;">
|
||||
<u--text :text="goodsDetai(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===5">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;"
|
||||
@click.stop="Navto({url:'/pages/discover/discover_video/index',type:'redirectTo',params:{noteId:discoverVideo(item.content).id}})">
|
||||
<image
|
||||
:src="discoverVideo(item.content).image" style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
<view style="position: absolute;bottom: 8rpx;left: 0;padding: 8rpx 4rpx;background-color: rgba(0, 0, 0, 0.5);border-radius: 14rpx;">
|
||||
<u--text :text="discoverVideo(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"chat-item",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default(){
|
||||
return {
|
||||
chatTime: '',
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
content: '',
|
||||
selfStatus: false
|
||||
}
|
||||
}
|
||||
},
|
||||
index:0
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
//商品详情
|
||||
goodsDetai(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
},
|
||||
//短视频详情
|
||||
discoverVideo(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
previewImage(img){
|
||||
uni.previewImage({
|
||||
urls:[img],
|
||||
current:0
|
||||
});
|
||||
},
|
||||
//播放视频
|
||||
videoPlay(e){
|
||||
this.$emit('videoPlay',e)
|
||||
},
|
||||
//跳转
|
||||
Navto(url){uni.$u.route(url)},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.chat-time{
|
||||
padding: 24rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
.chat-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.chat-video-container-me{
|
||||
margin-left: 0;
|
||||
/* #ifdef H5 */
|
||||
right:50rpx;
|
||||
/*#endif*/
|
||||
/* #ifdef MP */
|
||||
right:100rpx;
|
||||
/*#endif*/
|
||||
}
|
||||
.chat-video-container{
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin-left: 50rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-text-container-me-border-radius{
|
||||
border-radius:16rpx 0 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-text-container-border-radius{
|
||||
border-radius:0 16rpx 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-location-me{
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
.chat-icon-container{
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.chat-icon{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
.chat-content-container{
|
||||
margin: 0rpx 15rpx;
|
||||
}
|
||||
.chat-user-name{
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
}
|
||||
.chat-text-container{
|
||||
background-color: #FFF;
|
||||
border-radius: 8rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
margin-top: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.chat-text-container-me{
|
||||
background-color: #84D2CF;
|
||||
}
|
||||
.char-text{
|
||||
font-size: 28rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
word-break: break-all;
|
||||
/* #endif */
|
||||
}
|
||||
.char-text-me{
|
||||
color: white;
|
||||
}
|
||||
.video{
|
||||
width: 170rpx;
|
||||
height:262rpx;
|
||||
}
|
||||
</style>
|
||||
167
pages/message/message_Chat/message_Chat.nvue
Normal file
167
pages/message/message_Chat/message_Chat.nvue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<z-paging ref="paging" v-model="mainList" @query="queryList" :hide-empty-view="true" created-reload
|
||||
safe-area-inset-bottom use-chat-record-mode :auto-show-back-to-top="false"
|
||||
:pagingStyle="{'background-color':'#F1F1F1','height':height?($u.sys().screenHeight - height)+'px':'auto'}">
|
||||
<template slot="top">
|
||||
<view style="position: absolute;left: -99999px;z-index: 999;">
|
||||
<video id="myVideo" :src="videoUrl" @fullscreenchange="fullscreenchange" />
|
||||
</view>
|
||||
</template>
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view>
|
||||
<view :id="`z-paging-${index}`" v-for="(item,index) in mainList" :key="index">
|
||||
<chatItem :item="item" :index="index" @videoPlay="videoPlay" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 底部聊天输入框 -->
|
||||
<template #bottom>
|
||||
<chatInputBar @sendSMS="sendSMS" @keyboardheightchange="keyboardheightchange" @gridItemTap="gridItemTap"
|
||||
ref="chatInputBar" />
|
||||
</template>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chatItem from "./components/chat-item/chat-item.vue";
|
||||
import chatInputBar from "./components/chat-input-bar/chat-input-bar.vue";
|
||||
// import {
|
||||
// getMsgList,
|
||||
// SendMmsg
|
||||
// } from '@/api/carShop/message/index.js';
|
||||
export default {
|
||||
components: {
|
||||
chatItem,
|
||||
chatInputBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainList: [],
|
||||
height: 0,
|
||||
charSn: '',
|
||||
chatType: 0,
|
||||
toUid: 0,
|
||||
time: null,
|
||||
videoUrl: '',
|
||||
videoContext: null
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
},
|
||||
onLoad(opt) {
|
||||
if (opt.charSn) this.charSn = JSON.parse(decodeURIComponent(opt.charSn));
|
||||
this.chatType = opt.chatType || 0;
|
||||
this.toUid = opt.toUid || 0;
|
||||
uni.setNavigationBarTitle({
|
||||
title: `${decodeURIComponent(opt.toUidNickname)||'加载中...'}`
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.videoContext = uni.createVideoContext('myVideo', this);
|
||||
});
|
||||
this.time = setInterval(() => {
|
||||
if (!this.$store.getters.token) {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
return
|
||||
}
|
||||
if (this.charSn) {
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: 10,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
let Stutas = this.mainList.some(item => item.chatTime == res.data.list[0]
|
||||
.chatTime);
|
||||
if (!Stutas && !res.data.list[0].selfStatus) {
|
||||
this.$refs.paging.addChatRecordData(res.data.list[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 3000);
|
||||
uni.$emit('Chat', {
|
||||
type: 'remove',
|
||||
index: opt.index
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//监听全屏
|
||||
fullscreenchange(e) {
|
||||
if (!e.detail.fullScreen) {
|
||||
this.videoContext.pause();
|
||||
} else {
|
||||
this.videoContext.play();
|
||||
}
|
||||
},
|
||||
//播放视频自动进入全屏
|
||||
videoPlay(url) {
|
||||
this.videoUrl = url;
|
||||
this.videoContext.requestFullScreen(0);
|
||||
},
|
||||
//初始化
|
||||
queryList(pageNo, pageSize) {
|
||||
// #ifdef MP
|
||||
this.$u.debounce(() => {
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
}, 0);
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
//发送信息
|
||||
sendSMS(e) {
|
||||
SendMmsg({
|
||||
chatType: this.chatType,
|
||||
toUid: this.toUid,
|
||||
msgType: e.msgType,
|
||||
content: e.msg
|
||||
}).then(res => {
|
||||
this.charSn = res.data.chatSn;
|
||||
this.$refs.paging.addChatRecordData({
|
||||
chatTime: this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
|
||||
avatar: this.$store.getters.userInfo.avatar,
|
||||
nickname: this.$store.getters.userInfo.nickname,
|
||||
msgType: e.msgType,
|
||||
content: e.msg,
|
||||
selfStatus: true
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$u.toast(err.message);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
168
pages/message/message_Chat/message_Chat.vue
Normal file
168
pages/message/message_Chat/message_Chat.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<z-paging ref="paging" v-model="mainList" @query="queryList" :hide-empty-view="true" created-reload
|
||||
safe-area-inset-bottom use-chat-record-mode :auto-show-back-to-top="false"
|
||||
:pagingStyle="{'background-color':'#F1F1F1','height':height?($u.sys().screenHeight - height)+'px':'auto'}">
|
||||
<template slot="top">
|
||||
<view style="position: absolute;left: -99999px;z-index: 999;">
|
||||
<video id="myVideo" :src="videoUrl" @fullscreenchange="fullscreenchange" />
|
||||
</view>
|
||||
</template>
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view>
|
||||
<view :id="`z-paging-${index}`" v-for="(item,index) in mainList" :key="index">
|
||||
<chatItem :item="item" :index="index" @videoPlay="videoPlay" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 底部聊天输入框 -->
|
||||
<template #bottom>
|
||||
<chatInputBar @sendSMS="sendSMS" @keyboardheightchange="keyboardheightchange" @gridItemTap="gridItemTap"
|
||||
ref="chatInputBar" />
|
||||
</template>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chatItem from "./components/chat-item/chat-item.vue";
|
||||
import chatInputBar from "./components/chat-input-bar/chat-input-bar.vue";
|
||||
// import {
|
||||
// getMsgList,
|
||||
// SendMmsg
|
||||
// } from '@/api/carShop/message/index.js';
|
||||
export default {
|
||||
components: {
|
||||
chatItem,
|
||||
chatInputBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainList: [],
|
||||
height: 0,
|
||||
charSn: '',
|
||||
chatType: 0,
|
||||
toUid: 0,
|
||||
time: null,
|
||||
videoUrl: '',
|
||||
videoContext: null
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
},
|
||||
onLoad(opt) {
|
||||
if (opt.charSn) this.charSn = JSON.parse(decodeURIComponent(opt.charSn));
|
||||
this.chatType = opt.chatType || 0;
|
||||
this.toUid = opt.toUid || 0;
|
||||
uni.setNavigationBarTitle({
|
||||
title: `${decodeURIComponent(opt.toUidNickname)||'加载中...'}`
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.videoContext = uni.createVideoContext('myVideo', this);
|
||||
});
|
||||
this.time = setInterval(() => {
|
||||
if (!this.$store.getters.token) {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
return
|
||||
}
|
||||
if (this.charSn) {
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: 10,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
let Stutas = this.mainList.some(item => item.chatTime == res.data.list[0]
|
||||
.chatTime);
|
||||
if (!Stutas && !res.data.list[0].selfStatus) {
|
||||
this.$refs.paging.addChatRecordData(res.data.list[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 3000);
|
||||
uni.$emit('Chat', {
|
||||
type: 'remove',
|
||||
index: opt.index
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//监听全屏
|
||||
fullscreenchange(e) {
|
||||
if (!e.detail.fullScreen) {
|
||||
this.videoContext.pause();
|
||||
} else {
|
||||
this.videoContext.play();
|
||||
}
|
||||
},
|
||||
//播放视频自动进入全屏
|
||||
videoPlay(url) {
|
||||
this.videoUrl = url;
|
||||
this.videoContext.requestFullScreen(0);
|
||||
},
|
||||
//初始化
|
||||
queryList(pageNo, pageSize) {
|
||||
// #ifdef MP
|
||||
this.$u.debounce(() => {
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
}, 0);
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
//发送信息
|
||||
sendSMS(e) {
|
||||
let userInfo= uni.getStorageSync('userInfo')
|
||||
SendMmsg({
|
||||
chatType: this.chatType,
|
||||
toUid: this.toUid,
|
||||
msgType: e.msgType,
|
||||
content: e.msg
|
||||
}).then(res => {
|
||||
this.charSn = res.data.chatSn;
|
||||
this.$refs.paging.addChatRecordData({
|
||||
chatTime: this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
|
||||
avatar: userInfo.avatar,
|
||||
nickname: userInfo.nickname,
|
||||
msgType: e.msgType,
|
||||
content: e.msg,
|
||||
selfStatus: true
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$u.toast(err.message);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -85,7 +85,7 @@
|
||||
<u-popup :show="introductionShow" round="15" mode="bottom" @close="close" closeable>
|
||||
<view class="introduction">
|
||||
<u-textarea v-model="user.introduction" height="266rpx" border="none" count placeholder="请输入简介"
|
||||
:placeholderStyle="{background:'#F5F5F5',padding:'20rpx 10rpx'}"></u-textarea>
|
||||
:customStyle="{background:'#F5F5F5',padding:'20rpx 10rpx'}"></u-textarea>
|
||||
<view style="height: 40rpx;"></view>
|
||||
<u-button type="primary" color="#13AFA8" shape="circle" @click="changeNickname">保存</u-button>
|
||||
</view>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="cou_detail">
|
||||
<u-navbar title=" " safeAreaInsetTop placeholder>
|
||||
<view class="u-nav-slot" slot="left" @click="goBack">
|
||||
<u-icon name="arrow-left" size="19"></u-icon>
|
||||
<u-icon name="arrow-left" size="22" color='#000000'></u-icon>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="administration" slot="right">
|
||||
@@ -19,7 +19,7 @@
|
||||
</u-navbar>
|
||||
<!-- 主图 -->
|
||||
<view class="de_img">
|
||||
<image src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
<image :src="cardInfo.image" mode=""></image>
|
||||
</view>
|
||||
<!-- 秒杀 -->
|
||||
<!-- 选择性展示 -->
|
||||
@@ -66,9 +66,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="up_price"> ¥9.9 </view> -->
|
||||
<view class="up_r"> 剩余 8 </view>
|
||||
<view class="up_r"> 剩余 {{cardInfo.stock}} </view>
|
||||
</view>
|
||||
<view class="tit_down"> 福利大礼包限时抢购8种券大放送福利大礼包限时抢购8种券大放送福利大礼包限时抢购8种券大放送福利大礼包限时抢购8种券大放送 </view>
|
||||
<view class="tit_down"> {{cardInfo.name}} </view>
|
||||
</view>
|
||||
<!-- 规格 -->
|
||||
<view class="de_specs" @click="openSpecs">
|
||||
@@ -102,8 +102,8 @@
|
||||
<view class="info_l_con">
|
||||
<view class="con_name"> 客户 </view>
|
||||
<view class="con_star">
|
||||
<u-rate count="5" v-model="value" active-color="#F68D1F" inactive-color="#D9D9D9 "></u-rate>
|
||||
<text class="con_txt"> {{value}}.0 </text>
|
||||
<u-rate count="5" v-model="starValue" active-color="#F68D1F" inactive-color="#D9D9D9 " readonly></u-rate>
|
||||
<text class="con_txt"> {{starValue}}.0 </text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -165,18 +165,36 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCardProductInfoAPI } from '@/api/serve/coupons'
|
||||
import config from '@/config';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
config,
|
||||
showSpecs:false,
|
||||
specsValue:1,
|
||||
timeData: {},
|
||||
value: 4
|
||||
specsValue:1, // 数量
|
||||
timeData: {}, // 秒杀时间
|
||||
starValue: 4, // 评价星
|
||||
carId:null, // 卡券id
|
||||
cardInfo:{},
|
||||
}
|
||||
},
|
||||
onLoad(query) {
|
||||
console.log(query,'卡券详情页--接收卡券id');
|
||||
this.carId= +query.id
|
||||
},
|
||||
onShow() {
|
||||
this.getCardProductInfo()
|
||||
},
|
||||
methods:{
|
||||
getCardProductInfo(){
|
||||
getCardProductInfoAPI(this.carId).then(res=>{
|
||||
console.log(res,'卡券详情');
|
||||
this.cardInfo=res.data
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
buyBtn(){
|
||||
// 确认订单
|
||||
uni.navigateTo({
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<u-icon name="arrow-down-fill" color="#444444 " size="12"></u-icon>
|
||||
</view>
|
||||
<u-search placeholder="搜索" v-model="keyword" height="32" searchIconSize='24' :showAction='false'
|
||||
placeholderColor='#AAAAAA' searchIconColor='#999999'></u-search>
|
||||
placeholderColor='#AAAAAA' searchIconColor='#999999' @search="searchBtn" @clear='clearBtn'></u-search>
|
||||
</view>
|
||||
<!-- Tabs 标签 -->
|
||||
<view class="tabs_view">
|
||||
@@ -17,10 +17,10 @@
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="coupons_con">
|
||||
<view class="con_view" v-for="(item,index) in 9 " :key="index" @click="toDetailPages">
|
||||
<image class="view_img" src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
<view class="view_txt"> 标题最多显示两行卡券名称 2瓶*1L中负荷车辆齿轮油齿轮油 </view>
|
||||
<view class="view_price">￥198.00</view>
|
||||
<view class="con_view" v-for="(item,index) in cardProductList " :key="item.id" @click="toDetailPages(item)">
|
||||
<image class="view_img" :src="item.image" mode=""></image>
|
||||
<view class="view_txt"> {{item.name}} </view>
|
||||
<view class="view_price"> ￥{{item.price}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -28,12 +28,19 @@
|
||||
|
||||
<script>
|
||||
import { tabsList8 } from "@/data/tabsData.js"
|
||||
import { getCardProductListAPI } from '@/api/serve/coupons'
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
tabsList8,
|
||||
num:null,
|
||||
current:0,
|
||||
current:0, // 区别tabs
|
||||
cardData:{
|
||||
limit:20,
|
||||
page:1,
|
||||
name:''
|
||||
},
|
||||
keyword:'',
|
||||
cardProductList:[]
|
||||
}
|
||||
},
|
||||
onLoad(query) {
|
||||
@@ -41,16 +48,40 @@
|
||||
this.current=query.num
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getCardProductList()
|
||||
},
|
||||
methods:{
|
||||
// 搜索
|
||||
searchBtn(){
|
||||
console.log(this.keyword,'搜索按钮');
|
||||
this.cardData.name=this.keyword
|
||||
this.getCardProductList()
|
||||
},
|
||||
clearBtn(){
|
||||
this.cardData.name=''
|
||||
this.getCardProductList()
|
||||
},
|
||||
// 卡券商品
|
||||
getCardProductList(){
|
||||
console.log('123');
|
||||
getCardProductListAPI(this.cardData).then(res=>{
|
||||
console.log(res,'卡券商品分页列表 ');
|
||||
this.cardProductList=res.data.list
|
||||
}).catch(err=>{
|
||||
console.log(err,'err456');
|
||||
})
|
||||
},
|
||||
// 详情页
|
||||
toDetailPages(){
|
||||
toDetailPages(item){
|
||||
uni.navigateTo({
|
||||
url:`/pages/serve/coupons/cou_detail`
|
||||
url:`/pages/serve/coupons/cou_detail?id=${item.id}`
|
||||
})
|
||||
},
|
||||
// tabs 点击
|
||||
clickTabs(item){
|
||||
console.log(item,'tabs点击');
|
||||
// item.name => 名字 item.value => 1,2,3
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,8 +93,8 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="ac_down">
|
||||
<image class="down_img" src="@/static/images/app/serve/serve_zuche.png" mode=""></image>
|
||||
<image class="down_img" src="@/static/images/app/serve/serve_zhuliquan.png" mode=""></image>
|
||||
<image class="down_img" src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
<image class="down_img" src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 限时秒杀 -->
|
||||
@@ -109,7 +109,7 @@
|
||||
<!-- <scroll-view scroll-x> -->
|
||||
<view class="ac_down">
|
||||
<view class="down_view" v-for="(item,index) in 5" :key="index">
|
||||
<image class="view_img" src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
<image class="view_img" src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
<view class="view_txt"> 名称最多两行福利大商品名称最多两行福利大礼包限时抢购8种券大放送商品名称最多两行 </view>
|
||||
<view class="view_price">￥198.00</view>
|
||||
</view>
|
||||
@@ -128,7 +128,7 @@
|
||||
<!-- <scroll-view scroll-x> -->
|
||||
<view class="ac_down">
|
||||
<view class="down_view" v-for="(item,index) in 3" :key="index">
|
||||
<image class="view_img" src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
<image class="view_img" src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
<view class="view_txt"> 卡券名称 2瓶*1L中负荷车辆齿轮油卡券名称 2瓶*1L中负荷车辆齿轮油 </view>
|
||||
<view class="view_price">￥198.00</view>
|
||||
</view>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="nav">
|
||||
<u-navbar title=" " :placeholder='true' :border='true'>
|
||||
<view class="u-nav-slot" slot="left" @click="goBack">
|
||||
<u-icon name="arrow-left" size="19"></u-icon>
|
||||
<u-icon name="arrow-left" size="22" color='#000000'></u-icon>
|
||||
</view>
|
||||
<view class="u-nav-slot nav_center" slot="center" @click="openCenter">
|
||||
<text class="nav-txt"> {{navTitle}} </text>
|
||||
|
||||
@@ -92,9 +92,12 @@
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.like_r_xian {
|
||||
height: 0rpx;
|
||||
margin-top: 32rpx;
|
||||
border-top: 1rpx solid #EDEDED;
|
||||
// height: 0rpx;
|
||||
// border-top: 1rpx solid #EDEDED;
|
||||
background:#EDEDED;
|
||||
height: 1rpx;
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<view class="mess_all">
|
||||
<view class="mess_time"> 10-19 12:34 </view>
|
||||
<view class="order_mess">
|
||||
<view class="mess_order"> 租车订单 </view>
|
||||
<view class="mess_order"> <view class="order-txt"> 租车订单 </view> </view>
|
||||
<view class="mess_xian"></view>
|
||||
<view class="mess_desc"> 服务商已经上传合同，点击可查看合同详情! </view>
|
||||
</view>
|
||||
@@ -56,10 +56,12 @@
|
||||
}
|
||||
}
|
||||
.mess_xian {
|
||||
border: 1rpx solid #CED7E0;
|
||||
opacity: 0.3;
|
||||
height: 0rpx;
|
||||
// border: 1rpx solid #CED7E0;
|
||||
// height: 0rpx;
|
||||
margin: 24rpx 0;
|
||||
background:#EDEDED;
|
||||
height: 1rpx;
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
.mess_desc{
|
||||
font-size: 28rpx;
|
||||
|
||||
@@ -88,9 +88,11 @@
|
||||
|
||||
.con_xian {
|
||||
margin-top: 16rpx;
|
||||
height: 0rpx;
|
||||
opacity: 0.3;
|
||||
border: 1rpx solid #CED7E0;
|
||||
// height: 0rpx;
|
||||
// border: 1rpx solid #EDEDED;
|
||||
background:#EDEDED;
|
||||
height: 1rpx;
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
|
||||
.con_down{
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</view> -->
|
||||
<u-navbar title="消息" safeAreaInsetTop placeholder>
|
||||
<view class="u-nav-slot" slot="left" @click="goBack">
|
||||
<u-icon name="arrow-left" size="19"></u-icon>
|
||||
<u-icon name="arrow-left" size="22" color='#000000'></u-icon>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="administration" slot="right" @click="openClear">
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMyCarAPI,getCarInfoAPI,getMineInfoAPI, realNameDetaiNowlAPI} from '@/api/serve/repair/repair'
|
||||
import { getMyCarAPI,getCarInfoAPI,getMineInfoAPI, realNameDetaiNowlAPI} from '@/api/serve/repair'
|
||||
import { mapGetters } from 'vuex'
|
||||
import config from '@/config';
|
||||
export default {
|
||||
|
||||
@@ -160,7 +160,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userBindAPI, getCarInfoAPI,modelListAPI ,getMineInfoAPI, realNameDetaiNowlAPI} from '@/api/serve/repair/repair'
|
||||
import { userBindAPI, getCarInfoAPI,modelListAPI ,getMineInfoAPI, realNameDetaiNowlAPI} from '@/api/serve/repair'
|
||||
import config from '@/config';
|
||||
export default {
|
||||
data() {
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getStoreList, getCarouselAPI , reservationCreateAPI, getMyCarAPI , realNameDetaiNowlAPI} from '@/api/serve/repair/repair'
|
||||
import { getStoreList, getCarouselAPI , reservationCreateAPI, getMyCarAPI , realNameDetaiNowlAPI} from '@/api/serve/repair'
|
||||
import { mapGetters } from "vuex";
|
||||
import config from '@/config'
|
||||
export default {
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getHotCityAPI } from '@/api/serve/repair/repair'
|
||||
import { getHotCityAPI } from '@/api/serve/repair'
|
||||
import { mapGetters } from 'vuex'
|
||||
const area = require('../../../../data/address_a.js')
|
||||
export default {
|
||||
|
||||
@@ -37,14 +37,22 @@
|
||||
{{item.starLevel}} </text>
|
||||
</view>
|
||||
<view class="down_r">
|
||||
<view class="down_r_icon" @click.stop="callPhone(JSON.stringify(item.phone))">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/images/phone_fill.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view class="down_r_icon">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/images/pos_icon.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="down_r_icon" @click.stop="callPhone(JSON.stringify(item.phone))">
|
||||
<image :src="`${config.aliyunOssUrl}/static/images/app/serve/cou_store_phone.png`" mode=""></image>
|
||||
</view>
|
||||
<view class="down_r_icon">
|
||||
<image :src="`${config.aliyunOssUrl}/static/images/app/serve/cou_store_up.png`" mode=""></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<view class="up_r_icon" @click.stop="callPhone(JSON.stringify(item.phone))">
|
||||
<image src="@/static/images/app/serve/cou_store_phone.png" mode=""></image>
|
||||
</view>
|
||||
<view class="up_r_icon">
|
||||
<image src="@/static/images/app/serve/cou_store_up.png" mode=""></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -56,7 +64,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getStoreList, getCarouselAPI } from '@/api/serve/repair/repair'
|
||||
import { getStoreList, getCarouselAPI } from '@/api/serve/repair'
|
||||
import { mapGetters } from 'vuex'
|
||||
const QQMapWX = require('../../../../js_sdk/qqmap-wx-jssdk/qqmap-wx-jssdk.js')
|
||||
var qqmapsdk = new QQMapWX({ key: 'SH4BZ-BN36N-UYSFP-SJMPC-LZMGK-EWF3P' })
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTimeAPI, getDateListAPI } from '@/api/serve/repair/repair'
|
||||
import { getTimeAPI, getDateListAPI } from '@/api/serve/repair'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
@@ -90,18 +90,20 @@
|
||||
methods: {
|
||||
getTimeList() {
|
||||
this.dateData.merId = this.merId
|
||||
console.log(this.dateData,'123123123');
|
||||
// 当前时间
|
||||
getTimeAPI().then(res=>{
|
||||
console.log(res, '当前时间');
|
||||
this.dateData.workingDay = res.data.day
|
||||
this.ofWeek = res.data.dayOfWeek
|
||||
this.getTime(res.data.day)
|
||||
}).catch(err=>{
|
||||
this.$toast(err)
|
||||
})
|
||||
// 时间块
|
||||
getDateListAPI(this.dateData).then(res1=>{
|
||||
this.dateDataList = res1.data
|
||||
// 时间块
|
||||
getDateListAPI(this.dateData).then(res1=>{
|
||||
console.log(res1,'时间段');
|
||||
this.dateDataList = res1.data
|
||||
}).catch(err=>{
|
||||
this.$toast(err)
|
||||
})
|
||||
}).catch(err=>{
|
||||
this.$toast(err)
|
||||
})
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCarouselAPI } from '@/api/serve/repair/repair'
|
||||
import { getCarouselAPI } from '@/api/serve/repair'
|
||||
import config from '@/config';
|
||||
export default {
|
||||
data() {
|
||||
|
||||
106
pages/welfare/payment_state/payment_state.vue
Normal file
106
pages/welfare/payment_state/payment_state.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="unbindresult">
|
||||
|
||||
<view v-if="resultType=='err'">
|
||||
<view class="re_up" >
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image class="re_img" :src="`${config.aliyunOssUrl}/static/images/app/serve/payment_failure.png`" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image class="re_img" src="@/static/images/app/config/payment_failure.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="re_inspect" @click="toMyCardBagPage"> 返回订单详情 </view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="re_up" >
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image class="re_img" :src="`${config.aliyunOssUrl}/static/images/app/serve/cou_payresult.png`" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image class="re_img" src="@/static/images/app/serve/cou_payresult.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<view class="re_txt"> 您的订单已经支付成功，可以到服务订单查看 </view>
|
||||
</view>
|
||||
<view class="re_inspect" @click="toMyCardBagPage"> 服务订单 </view>
|
||||
<view class="re_return" @click="toHomePage"> 返回首页 </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config';
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
config,
|
||||
resultType:''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toMyCardBagPage(){
|
||||
uni.redirectTo({
|
||||
url:'/pages/mine/my_order/serveOrder/serve_order'
|
||||
})
|
||||
},
|
||||
toHomePage() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options);
|
||||
this.resultType='err'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.re_up{
|
||||
// border: 1px solid red;
|
||||
margin-top: 136rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.re_img{
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.re_txt{
|
||||
height: 36rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
.re_inspect{
|
||||
width: 332rpx;
|
||||
height: 80rpx;
|
||||
background: #13AFA8;
|
||||
border-radius: 60rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 96rpx auto 0;
|
||||
}
|
||||
.re_return{
|
||||
width: 136rpx;
|
||||
height: 48rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #13AFA8;
|
||||
margin: 32rpx auto;
|
||||
}
|
||||
.unbindresult{
|
||||
background: #FFFFFF;
|
||||
height: 100vh;
|
||||
border-top: 1rpx solid #E6E6E6;
|
||||
}
|
||||
</style>
|
||||
214
pages/welfare/rightsInterests/confirm_order.vue
Normal file
214
pages/welfare/rightsInterests/confirm_order.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view>
|
||||
<view :class="['f-a-i','integral']">
|
||||
<image src="@/static/images/app/serve/coupons_img1.png" mode=""></image>
|
||||
<view class="integral-cont">
|
||||
<view class="">
|
||||
<u--text :lines="1" size="14" text="积分券"></u--text>
|
||||
</view>
|
||||
<view class="f-jcsb integral-specification">
|
||||
<text class="">暗夜黑 规格2 规格3</text>
|
||||
<view class="">X 1</view>
|
||||
</view>
|
||||
<view class="f-a-i">
|
||||
<view class="integral-price">¥9.9 + </view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image style="width: 28rpx;height: 28rpx;"
|
||||
:src="`${config.aliyunOssUrl}/static/images/app/mine/integral_hei.png`" mode="">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<image style="width: 28rpx;height: 28rpx;" src="@/static/images/app/mine/integral_hei.png" mode="">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<view class="integral-price">198</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['order-data']">
|
||||
<view class="flex align-center justify-between">
|
||||
<view class="c444">商品金额</view>
|
||||
<view class="c111 fw-5">¥200</view>
|
||||
</view>
|
||||
<view class="flex align-center justify-between">
|
||||
<view class="c444">消耗积分</view>
|
||||
<view class="c111 fw-5">200</view>
|
||||
</view>
|
||||
<view class="flex align-center justify-between" @click="remarkShow=true">
|
||||
<view class="c444">订单备注</view>
|
||||
<view class="c999">{{remark}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="close-account flex justify-between">
|
||||
<view class="order-data-payment">
|
||||
<view class="order-data-payment-title">付款: <text>￥9.9</text></view>
|
||||
<view class="c666 f-24">商品价格<text class="c000">19.8</text>元+积分<text class="c000">8</text></view>
|
||||
</view>
|
||||
<u-button color="#13AFA8" :customStyle="{width: '232rpx',height: '96rpx', margin: 0, fontSize:'34rpx'}"
|
||||
shape="circle" @click="paymentShow = true">去结算</u-button>
|
||||
</view>
|
||||
<u-popup :show="remarkShow" round="15" mode="bottom" closeable>
|
||||
<view class="remark">
|
||||
<view class="remark-tit">备注</view>
|
||||
<u-textarea v-model="remark" height="266rpx" border="none" count placeholder="请输入备注"
|
||||
:customStyle="{background:'#F5F5F5',padding:'20rpx 10rpx'}"></u-textarea>
|
||||
<view style="height: 40rpx;"></view>
|
||||
<u-button type="primary" color="#13AFA8" shape="circle" @click="submitFn">提交</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 选择支付 -->
|
||||
<PaymentType ref="payment" :paymentShow="paymentShow" :submitPayment="submitPayment" :topUpTypeClose="topUpTypeClose"></PaymentType>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PaymentType from "@/components/payment-type.vue"
|
||||
export default {
|
||||
components:{
|
||||
PaymentType
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
remarkShow: false,
|
||||
remark: '选填选填选填选填选填选填选填选填',
|
||||
paymentShow: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitFn() {
|
||||
this.remarkShow = false
|
||||
},
|
||||
//确认支付
|
||||
submitPayment(){
|
||||
this.paymentShow = false
|
||||
console.log(this.$refs.payment.topUpType);
|
||||
uni.navigateTo({
|
||||
url:`/pages/welfare/payment_state/payment_state`
|
||||
})
|
||||
},
|
||||
//关闭支付
|
||||
topUpTypeClose() {
|
||||
this.paymentShow = false
|
||||
console.log('topUpTypeClose');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.top-up-popup {
|
||||
padding: 48rpx 0 88rpx 0;
|
||||
|
||||
.top-up-popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
padding-left: 24rpx;
|
||||
padding-bottom: 48rpx;
|
||||
border-bottom: 1rpx solid #F4F4F4;
|
||||
}
|
||||
|
||||
.top-up-popup-type {
|
||||
margin-top: 48rpx;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.top-up-popup-type-zfb,
|
||||
.top-up-popup-type-wx {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top-up-popup-button {
|
||||
width: calc(100% - 48rpx);
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.remark {
|
||||
width: calc(100% - 48rpx);
|
||||
margin: 24rpx;
|
||||
padding: 40rpx 0rpx;
|
||||
|
||||
.remark-tit {
|
||||
margin-bottom: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
.close-account {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 8rpx 24rpx 94rpx 24rpx;
|
||||
background: #fff;
|
||||
|
||||
.order-data-payment {
|
||||
.order-data-payment-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-data {
|
||||
padding: 32rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
margin: 32rpx 24rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.integral {
|
||||
padding: 32rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
margin: 32rpx 24rpx;
|
||||
|
||||
.integral-cont {
|
||||
height: 144rpx;
|
||||
width: calc(100% - 165rpx);
|
||||
margin-left: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.integral-specification {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.integral-price {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -35,6 +35,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-introduce info-spec flex justify-between" @click="specificationShow = true">
|
||||
<view class="info-spec-title">规格</view>
|
||||
<view class="flex align-center ">请选择
|
||||
<u-icon name="arrow-right" size="16" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="commodity-details flex justify-center align-center">
|
||||
<u-line length="188rpx"></u-line>
|
||||
<view class="">商品详情</view>
|
||||
<u-line length="188rpx"></u-line>
|
||||
</view>
|
||||
<view style="background: #fff;">
|
||||
<view v-html="details"></view>
|
||||
</view>
|
||||
<view class="buy-immediately">
|
||||
<u-button color="#333333" :customStyle="{width: '702rpx',height: '80rpx', margin: 0, fontSize:'24rpx'}"
|
||||
shape="circle" @click="buyImmediatelyFn">立即购买</u-button>
|
||||
</view>
|
||||
<!-- 规格选择 -->
|
||||
<u-popup :show="specificationShow" round="top" @close="specificationClose" @open="specificationOpen">
|
||||
<view class="specification-popup">
|
||||
@@ -69,11 +87,14 @@
|
||||
<view>已选：规格1 规格参数2</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(item,index) in 2" :key="index">
|
||||
<view class="spec-type">颜色</view>
|
||||
<view v-for="(item,index) in specTabArr" :key="item.id">
|
||||
<view class="spec-type">{{item.name}}</view>
|
||||
<view class="spec-type-list flex flex-wrap justify-between">
|
||||
<view :class="[index==1?'act-spec':'']" v-for="(item2,index2) in 4" :key="index2">浅蓝</view>
|
||||
<view v-for="(item3,index3) in (4%3-1)<0?0:(4%3-1)" :key="index3"></view>
|
||||
<view :class="[actArr[index]==index2?'act-spec':'']" v-for="(item2,index2) in item.arr"
|
||||
:key="item2.id" @click="actSpecFn(item2,index,index2)">{{item2.name}}{{index2}}</view>
|
||||
<view style="border: none;"
|
||||
v-for="(item3,index3) in (item.arr.length%3-1)<0?0:(item.arr.length%3-1)" :key="index3">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between shop-number">
|
||||
@@ -92,7 +113,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-button color="#13AFA8" :customStyle="{width: '702rpx',height: '80rpx', margin: 0, fontSize:'24rpx'}" shape="circle">确认</u-button>
|
||||
<u-button color="#13AFA8"
|
||||
:customStyle="{width: '702rpx',height: '80rpx', margin: 0, fontSize:'24rpx'}" shape="circle"
|
||||
@click="endSpecificationFn">确认</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -107,14 +130,52 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value:0,
|
||||
details: '<h1>商品详情</h1>',
|
||||
value: 0,
|
||||
branner: [], // 轮播图列表
|
||||
currentNum: 0,
|
||||
//规格弹出
|
||||
specificationShow: true,
|
||||
specificationShow: false,
|
||||
actArr: [],
|
||||
specTabArr: [{
|
||||
id: 1,
|
||||
name: '颜色',
|
||||
arr: [{
|
||||
id: 3,
|
||||
name: '红色'
|
||||
}, {
|
||||
id: 4,
|
||||
name: '红蓝渐变'
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
name: '尺寸',
|
||||
arr: [{
|
||||
id: 5,
|
||||
name: '13'
|
||||
}, {
|
||||
id: 6,
|
||||
name: '14'
|
||||
}]
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//立即购买
|
||||
buyImmediatelyFn(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/welfare/rightsInterests/confirm_order'
|
||||
})
|
||||
},
|
||||
//选择规格
|
||||
actSpecFn(item, index, index2) {
|
||||
console.log(item, index, index2);
|
||||
this.$set(this.actArr, index, index2)
|
||||
},
|
||||
//弹出层确认
|
||||
endSpecificationFn() {
|
||||
this.specificationShow = false
|
||||
},
|
||||
//弹出层
|
||||
specificationClose() {},
|
||||
specificationOpen() {},
|
||||
@@ -142,11 +203,30 @@
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.buy-immediately {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
padding: 18rpx 24rpx 68rpx 24rpx;
|
||||
}
|
||||
|
||||
.commodity-details {
|
||||
margin: 24rpx 0;
|
||||
|
||||
view {
|
||||
margin: 0 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.specification-popup {
|
||||
padding: 32rpx 24rpx 40rpx 24rpx;
|
||||
.shop-number{
|
||||
|
||||
.shop-number {
|
||||
margin: 40rpx 0 78rpx 0;
|
||||
}
|
||||
|
||||
.specification-popup-cont {
|
||||
width: calc(100% - 228rpx);
|
||||
height: 212rpx;
|
||||
@@ -192,6 +272,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.info-spec {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
.info-spec-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
}
|
||||
|
||||
.info-introduce {
|
||||
padding: 40rpx 24rpx 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
BIN
static/images/app/config/payment_failure.png
Normal file
BIN
static/images/app/config/payment_failure.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 325 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
@@ -65,6 +65,9 @@ image {
|
||||
.black {
|
||||
color: #000;
|
||||
}
|
||||
.c000{
|
||||
color: #000;
|
||||
}
|
||||
.white {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user