Skip to content

C
center-shop-show-h5
提交 b4cdc3ac authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: 页面配置字段调整

上级 f481ce36
隐藏空白字符变更
内嵌 并排
正在显示 包含 131 行增加 和 114 行删除
.config.dev.js
浏览文件 @ b4cdc3ac
module.exports = {
domain: 'dev.ezijing.com',
url: 'https://h5-shop.ezijing.com/api',
url: 'https://h5-shop2.ezijing.com/api',
webpack: {
externals: {
CKEDITOR: 'window.CKEDITOR',
......@@ -22,6 +22,6 @@ module.exports = {
},
ProvidePlugin: {},
others: {
loginUrl: 'https://login.ezijing.com/auth/login/index'
loginUrl: 'https://login2.ezijing.com/auth/login/index'
}
}
src/pages/buy/components/BuyPopup.vue
浏览文件 @ b4cdc3ac
......@@ -21,8 +21,8 @@
/>
</template>
<!-- 提示 -->
<template #extra v-if="options.goods">
<div class="tips" v-if="options.goods.charact">{{ options.goods.charact }}</div>
<template #extra v-if="options.spare">
<div class="tips" v-if="options.spare.buy_desc">{{ options.spare.buy_desc }}</div>
</template>
</van-field>
<van-form :show-error="false" @submit="handleSuccess">
......
src/pages/buy/index.vue
浏览文件 @ b4cdc3ac
<template>
<div class="buy-container">
<van-swipe class="my-swipe" indicator-color="white" @change="index => swipeAcitve = index">
<van-swipe class="my-swipe" indicator-color="white" @change="index => (swipeAcitve = index)">
<van-swipe-item class="video" v-if="details.main_chart_oss" @click="handleVideoClick">
<video :src="details.main_chart_oss" playsinline :poster="`${details.main_chart_oss}?x-oss-process=video/snapshot,t_10,f_jpg,w_0,h_0,m_fast`" ref="video"></video>
<van-icon :name="videoPlay ? 'pause-circle-o':'play-circle-o'" />
<video
:src="details.main_chart_oss"
playsinline
:poster="`${details.main_chart_oss}?x-oss-process=video/snapshot,t_10,f_jpg,w_0,h_0,m_fast`"
ref="video"
></video>
<van-icon :name="videoPlay ? 'pause-circle-o' : 'play-circle-o'" />
</van-swipe-item>
<van-swipe-item v-for="(item, index) in imgList" :key="item.url">
<img v-if="swipeAcitve === index + 1" :src="item.url">
<img v-if="swipeAcitve === index + 1" :src="item.url" />
</van-swipe-item>
</van-swipe>
<div class="item price-item">
<h6>
<span>￥</span>{{priceFormat(details.price_zone)}}
</h6>
<h6><span>￥</span>{{ priceFormat(details.price_zone) }}</h6>
<p>
<span class="title">{{details.spu_name || ''}}</span>
<span class="surplus">剩余 {{details.stock}}</span>
<span class="title">{{ details.spu_name || '' }}</span>
<span class="surplus">剩余 {{ details.stock }}</span>
</p>
</div>
<div class="item service-item">
......@@ -25,17 +28,17 @@
</div> -->
<div class="service">
<span>服务</span>
<p v-if="details.describe">{{details.describe}}</p>
<p v-if="spare.service_desc">{{ spare.service_desc }}</p>
<p v-else>不支持退款</p>
<van-icon name="arrow"/>
<van-icon name="arrow" />
</div>
</div>
<div class="item shop-item">
<van-cell value="进店逛逛" is-link @click="navShop(shopInfo.shop_id)">
<!-- 使用 title 插槽来自定义标题 -->
<template #title>
<img class="shop-logo" :src="shopInfo.shop_logo">
<span class="shop-name van-ellipsis">{{shopInfo.shop_name}}</span>
<img class="shop-logo" :src="shopInfo.shop_logo" />
<span class="shop-name van-ellipsis">{{ shopInfo.shop_name }}</span>
</template>
</van-cell>
</div>
......@@ -44,10 +47,12 @@
<div v-html="details.spu_context"></div>
</div>
<div class="bottom-bar" v-if="details.status === '2'">
<van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">{{details.buy_button_text || '立即购买'}}</van-button>
<van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">{{
details.buy_button_text || '立即购买'
}}</van-button>
</div>
<buy-popup v-model="popupVisiable" :options="popupOptions" @placeOrder="handlePlaceOrder"/>
<phone-code-login-popup v-model="loginPopupVisiable" @loginSuccess="popupVisiable = true"/>
<buy-popup v-model="popupVisiable" :options="popupOptions" @placeOrder="handlePlaceOrder" />
<phone-code-login-popup v-model="loginPopupVisiable" @loginSuccess="popupVisiable = true" />
</div>
</template>
<script>
......@@ -82,11 +87,19 @@ export default {
query() {
return this.$route.query
},
spu_id () {
spu_id() {
return this.query.spu_id || ''
},
shop_id () {
shop_id() {
return this.query.shop_id || ''
},
spare() {
try {
return this.details.spare ? JSON.parse(this.details.spare) : {}
} catch (error) {
console.log('额外页面配置信息解析失败', error)
}
return {}
}
},
beforeMount() {
......@@ -139,7 +152,7 @@ export default {
const params = Object.assign({}, val)
params.customer_id = this.user.id
params.customer_phone = this.user.mobile || ''
params.buy_count = (params.buy_count).toString()
params.buy_count = params.buy_count.toString()
params.redirect_url = this.order_details_url
this.payment_method = params.payment_method
if (params.payment_method === '3') {
......@@ -148,7 +161,9 @@ export default {
this.fetchPlaceOrder(params)
},
getCode() {
const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(window.location.href)}`
const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(
window.location.href
)}`
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base#wechat_redirect`
},
// 获取微信openid
......@@ -179,6 +194,7 @@ export default {
}
this.swipeAcitve = first.main_chart_oss ? 0 : 1
this.popupOptions = {
spare: this.spare,
goods: first,
specs: first.spec,
fields: first.app_button_text,
......@@ -216,7 +232,7 @@ export default {
if (typeof res.payment_more_info === 'string') {
const payInfo = JSON.parse(res.payment_more_info)
if (payInfo.appId) {
WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, (res) => {
WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, res => {
window.location.href = this.order_details_url
})
}
......@@ -233,127 +249,128 @@ export default {
}
</script>
<style scoped lang="scss">
.buy-container{
padding-bottom:1.04rem;
.buy-container {
padding-bottom: 1.04rem;
}
.van-swipe-item{
.van-icon{
position:absolute !important;
left:0.3rem;
bottom:0.3rem;
z-index:10;
font-size:30px;
color:#fafafa;
.van-swipe-item {
.van-icon {
position: absolute !important;
left: 0.3rem;
bottom: 0.3rem;
z-index: 10;
font-size: 30px;
color: #fafafa;
}
video, img{
width:100%;
video,
img {
width: 100%;
}
video::-webkit-media-controls{
display:none !important;
video::-webkit-media-controls {
display: none !important;
}
}
.item{
background:#fff;
margin:0.1rem 0.1rem 0.2rem;
.item {
background: #fff;
margin: 0.1rem 0.1rem 0.2rem;
border-radius: 0.2rem;
padding:0.3rem 0.35rem;
padding: 0.3rem 0.35rem;
}
.price-item{
line-height:0.48rem;
h6{
color:#C01540;
line-height:0.64rem;
font-size:0.36rem;
span{
font-size:0.24rem;
.price-item {
line-height: 0.48rem;
h6 {
color: #c01540;
line-height: 0.64rem;
font-size: 0.36rem;
span {
font-size: 0.24rem;
}
}
p{
display:flex;
.title{
flex:1;
font-size:0.28rem;
p {
display: flex;
.title {
flex: 1;
font-size: 0.28rem;
}
.surplus{
line-height:0.48rem;
color:#B4B4B4;
font-size:0.26rem;
.surplus {
line-height: 0.48rem;
color: #b4b4b4;
font-size: 0.26rem;
}
}
}
.service-item{
div{
display:flex;
line-height:0.8rem;
font-size:0.26rem;
span{
width:1rem;
color:#9B9B9B;
.service-item {
div {
display: flex;
line-height: 0.8rem;
font-size: 0.26rem;
span {
width: 1rem;
color: #9b9b9b;
}
p{
flex:1;
p {
flex: 1;
}
}
.service{
position:relative;
.van-icon{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
font-size:16px;
.service {
position: relative;
.van-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #969799;
}
}
}
.shop-item{
.van-cell{
width:100%;
padding:0.2rem 0;
line-height:0.8rem;
align-items:center;
::v-deep.van-cell__title{
display:flex;
.shop-item {
.van-cell {
width: 100%;
padding: 0.2rem 0;
line-height: 0.8rem;
align-items: center;
::v-deep.van-cell__title {
display: flex;
width: calc(100% - 1.6rem);
.shop-logo{
width:0.8rem;
height:0.8rem;
border-radius:0.1rem;
.shop-logo {
width: 0.8rem;
height: 0.8rem;
border-radius: 0.1rem;
}
.shop-name{
width:calc(100% - 0.8rem);
font-size:0.28rem;
margin:0 0.1rem;
.shop-name {
width: calc(100% - 0.8rem);
font-size: 0.28rem;
margin: 0 0.1rem;
}
}
::v-deep.van-cell__value{
::v-deep.van-cell__value {
flex: unset;
font-size:0.28rem;
width:1.4rem;
font-size: 0.28rem;
width: 1.4rem;
}
}
}
.shop-details{
.shop-details {
* {
max-width:100% !important;
max-width: 100% !important;
}
::v-deep *{
max-width:100% !important;
overflow-x:hidden;
::v-deep * {
max-width: 100% !important;
overflow-x: hidden;
}
}
.bottom-bar{
position:fixed;
bottom:-1px;
width:100%;
max-width:750px;
box-sizing:border-box;
padding:0.2rem 0.8rem;
background:#fff;
.van-button{
height:0.64rem;
line-height:0.64rem;
font-size:0.24rem;
.bottom-bar {
position: fixed;
bottom: -1px;
width: 100%;
max-width: 750px;
box-sizing: border-box;
padding: 0.2rem 0.8rem;
background: #fff;
.van-button {
height: 0.64rem;
line-height: 0.64rem;
font-size: 0.24rem;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论