123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391 |
- <template>
- <view style="width: 100%;height: 100%;background-color: #ececec;">
- <!-- 卡券 -->
- <view class="card">
- <view class="card_view">
- <!-- 放图片 标题 -->
- <view class="title">
- <image :src="imghos+packs.image" class="img"></image>
- </view>
- <!-- 放描述 -->
- <view class="describe">
- <view style="font-size: 40rpx;font-weight: bold;">{{packs.name}}</view>
- <view style="font-size: 28rpx;font-weight: bold;padding-top: 60rpx;">有效期</view>
- <view style="font-size: 26rpx;color: #999999;padding-top: 30rpx;">自购买服务起{{packs.effective_days}}天</view>
- <view style="font-size: 28rpx;font-weight: bold;padding-top: 50rpx;">服务包内容介绍</view>
- <view style="font-size: 26rpx;color: #999999;">
- <view style="padding: 27rpx 0 12rpx 0;">{{packs.intro}}</view>
- <rich-text style="padding: 12rpx 0;" :nodes="packs.desc"></rich-text>
- </view>
- <view class="margin-top-sm" v-for="(item,index) in packs.team" :key="index">
- <u-radio-group v-model="value" @change="radioGroupChange">
- <u-radio :name="item.id" style="font-weight: bold;">
- {{item.name}}
- </u-radio>
- </u-radio-group>
- <!-- <view style="font-size: 28rpx;font-weight: bold;padding-top: 48rpx;">{{item.name}}</view> -->
- <view class="list" v-for="(ite,idx) in item.docter" :key="idx">
- <!-- 头像 -->
- <view class="portrait">
- <view style="padding-top: 20rpx;">
- <image class="img" :src="ite.avatar"></image>
- <view class="bun_true" @click="submitCollect" :data-itemindex="index" :data-index="idx" :data-id="ite.id" v-if="ite.is_collect==0">关注</view>
- <view class="bun_false" @click="submitCollect" :data-itemindex="index" :data-index="idx" :data-id="ite.id"
- v-else>已关注</view>
- </view>
- </view>
- <!-- 文字 -->
- <view class="text">
- <!-- 名字+标签 -->
- <view class="name">
- <view style="margin-right: 15rpx;">{{ite.name}}</view>
- <view class="label" v-for="(itm,idex) in ite.label_texts" :key="idex">{{itm.label_name}}</view>
- </view>
- <!-- 科室 -->
- <view class="department">
- <text>科室:</text>
- <text style="color: #333333;">{{ite.office.name||'暂无'}}</text>
- <text style="color: #333333;">{{ite.qualification.name||'暂无'}}</text>
- </view>
- <!-- 选项 -->
- <view class="option">
- <view v-if="ite.is_chat">图文</view>
- <view v-if="ite.is_phone">电话</view>
- <view v-if="ite.is_appoint">门诊</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 协议 -->
- <view style="height: 200rpx;width: 100%;display: flex;justify-content: left;">
- <view @click="isqueren" style="height: 35rpx;width: auto;font-size: 24rpx;margin-left: 30rpx;display: flex;align-items: center;">
- <image :src="imgitem.name" mode="" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image>
- <text style="color: #999999;">已阅读并同意</text>
- <text style="color: #0B73B9;" @click.stop="gotoxieyi">《熙宝HMO》</text>
- <text style="color: #999999;">服务协议</text>
- </view>
- </view>
- <!-- 两个半圆 -->
- <view class="round" style="position:absolute;top: 25vh;right:0;"></view>
- <view class="round" style="position:absolute;top: 25vh;"></view>
- <!-- 底部按钮 -->
- <view class="footer">
- <view class="cu-bar bg-white tabbar border shop" style="width: 100%;">
- <button class="action" @click="show=true" style="width: 33%;">
- <view class="cuIcon-service text-green">
- </view>
- 客服
- </button>
- <view class="submit" @click="next" style="background-color: #0B73B9; color: #FFFFFF;">下一步</view>
- </view>
- </view>
- <u-popup v-model="show" mode="bottom" border-radius="14" height="300rpx">
- <u-button open-type="contact" :custom-style="customStyle">在线咨询</u-button>
- <u-button @click="playphone" :custom-style="customStyle">电话咨询</u-button>
- </u-popup>
- <!-- <view class="backfoot">
- 底部
- </view> -->
- </view>
- </template>
- <script>
- export default {
- name: 'productdetailspage',
- onLoad(op) {
- this.serviceid = op.id
- this.$util.getAgreement().then(res => {
- this.service_protocol = res.data.service_protocol
- this.phone = res.data.phone
- }).catch(err => {
- })
- this.imghos = this.$imgHost
- },
- mounted() {
- this.getservice()
- },
- data() {
- return {
- //关注
- isfollow: false,
- //协议
- num: 1,
- imgitem: {
- istrue: false,
- name: "https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/xieyi.png"
- },
- packs: {},
- serviceid: "",
- show: false,
- customStyle: {
- width: '600rpx',
- marginTop: "35rpx"
- },
- service_protocol: "",
- phone: "",
- imghos: "",
- value: ""
- }
- },
- methods: {
- pageScrollToBottom() {
- uni.createSelectorQuery().select('.card').boundingClientRect((rect) => {
- // 使页面滚动到底部
- // uni.pageScrollTo({
- // })
- }).exec()
- },
- gotoxieyi() {
- uni.navigateTo({
- url: "../index/agreement?data=" + encodeURIComponent(this.packs.service_agreement_protocol)
- })
- },
- playphone() {
- uni.makePhoneCall({
- phoneNumber: this.phone
- })
- this.show = false
- },
- radioGroupChange(e) {
- console.log(e)
- this.value = e
- },
- //关注
- submitCollect: async function(e) {
- console.log(e)
- let res = await this.$request.post("/api/v1/collection/submitCollect", {
- type: 1,
- relation_id: e.currentTarget.dataset.id
- })
- if (res.status == 0) {
- if (res.data.is_collect == 0) {
- uni.showToast({
- title: "取消成功",
- icon: "none"
- })
- this.packs.team[e.currentTarget.dataset.itemindex].docter[e.currentTarget.dataset.index].is_collect = res.data.is_collect
- } else {
- uni.showToast({
- title: "关注成功",
- icon: "none"
- })
- this.packs.team[e.currentTarget.dataset.itemindex].docter[e.currentTarget.dataset.index].is_collect = res.data.is_collect
- }
- }
- },
- getservice: async function() {
- let res = await this.$request.post("/api/v1/ServicePack/servicePackDetail", {
- service_pack_id: this.serviceid
- })
- console.log(res)
- if (res.status == 0) {
- this.packs = res.data
- }
- },
- isqueren() {
- this.num++
- if (this.num % 2 == 0) {
- this.imgitem.name = "https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/xieyixuan.png"
- this.imgitem.istrue = true
- } else {
- this.imgitem.name = "https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/xieyi.png"
- this.imgitem.istrue = false
- }
- },
- next(e) {
- if (this.value == '' && this.packs.team_id != 0) {
- uni.showToast({
- title: "请先选择服务团队",
- icon: "none"
- })
- return false
- }
- if (!this.imgitem.istrue) {
- uni.showToast({
- icon: 'none',
- position: 'bottom',
- title: '请先同意《协议》'
- });
- } else {
- let obj = {
- id: this.packs.id,
- price: this.packs.price,
- is_need_insure: this.packs.is_need_insure,
- service_pack_protocol: encodeURIComponent(this.packs.service_pack_protocol),
- team_id: this.value
- }
- uni.navigateTo({
- url: '/pages/service_packs/packs_information?data=' + JSON.stringify(obj)
- })
- }
- }
- }
- }
- </script>
- <style lang="scss">
- .footer {
- width: 100%;
- height: auto;
- display: flex;
- position: fixed;
- bottom: 0;
- }
- .backfoot{
- position: fixed;
- bottom: 120rpx;
- right: 0;
- }
- .round {
- height: 45rpx;
- width: 50rpx;
- border-radius: 50%;
- background-color: #ececec;
- }
- .card {
- padding: 30rpx 30rpx;
- box-sizing: border-box;
- .card_view {
- width: 100%;
- background-color: #ffffff;
- border-radius: 15rpx;
- .title {
- width: 100%;
- height: 20vh;
- display: flex;
- justify-content: center;
- align-items: flex-end;
- .img {
- width: 90%;
- height: 90%;
- }
- }
- .describe {
- width: 100%;
- height: 1;
- padding: 100rpx 40rpx 20rpx 40rpx;
- }
- }
- }
- .list {
- margin: 20rpx 0 10rpx 0;
- display: flex;
- width: 100%;
- height: 200rpx;
- border-radius: 15rpx;
- background-color: #FFFFFF;
- box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
- .portrait {
- width: 30%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- .img {
- width: 100rpx;
- height: 100rpx;
- border-radius: 50%;
- }
- .bun_true {
- text-align: center;
- width: 80rpx;
- height: 36rpx;
- background-color: #D92975;
- margin: 0 10rpx;
- border-radius: 60rpx;
- position: relative;
- top: -20rpx;
- font-size: 20rpx;
- color: #FFFFFF;
- padding: 3rpx 0;
- }
- .bun_false {
- border: 1rpx solid #D92975;
- text-align: center;
- width: 80rpx;
- height: 36rpx;
- background-color: #FFFFFF;
- margin: 0 10rpx;
- border-radius: 60rpx;
- position: relative;
- top: -20rpx;
- font-size: 20rpx;
- color: #D92975;
- padding: 3rpx 0;
- }
- }
- //文字
- .text {
- width: 70%;
- height: 100%;
- padding: 20rpx 0;
- //名字+标签
- .name {
- font-size: 30rpx;
- font-weight: bold;
- display: flex;
- align-items: center;
- .label {
- font-weight: 400;
- margin-right: 15rpx;
- background-color: #E5F5FF;
- color: #0B73B9;
- // width: 120rpx;
- height: 28rpx;
- font-size: 20rpx;
- border-radius: 10rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- //科室
- .department {
- padding: 20rpx 0;
- color: #666666;
- text {
- margin-right: 15rpx;
- }
- }
- // 选项
- .option {
- display: flex;
- view {
- background-color: #E4E4E4;
- width: 100rpx;
- height: 48rpx;
- border-radius: 12px;
- margin-right: 15rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- }
- }
- </style>
|